3

潜在的に大規模なリファクタリングの全体像を見るのに苦労しています。2 つの問題を同時に解決するソリューション (存在する場合) を探しています。私は長い間 d3 でコーディングしておらず、最初から流暢ではありませんでした。

MCMC の簡単なデモを作成しました。次のようになります。 デモ写真

thetasすべてのデータは、次元がnChainsxまたは 2 x ...の配列に存在しnItersます (マウスをクリックするたびにチェーンの長さが増加します)。

ここで、チェーンごとに同じ長さのバーンインを示したいと思います。左のプロットでは、チェーンごとに異なる色 (オレンジと赤など) でバーンインが表示され、最初のbiLengthポイントが表示されます。事実上、biLength既に存在する最初のポイントは異なる色で表示されます。右側のヒストグラムでは、これらのポイントに対応する独自のバーが必要です。

バーンインを保持するために別の配列を作成し、各プロットにデータの 2 つのコンテナーを効果的にプロットする必要がありますか? (これを行う方法の例はありますか?) あるいは、データを保持し、thetasサブコンポーネントを別の方法で処理する方法はありますか? （例？）

現在どのようにプロットしているかを示すサンプルコードを次に示しますthetas。

// 左プロットの更新
関数 movePoints ()
    {
    var tmp = chart.selectAll(".vis1points").data(thetas[0], function (d, i) { return i; } );
    tmp
        .enter().insert("svg:circle")
        .attr("クラス", "vis1points")
        .attr("cx", function (d, i) { return xx(i); })
        .attr("cy", yy)
        .attr("r", 3)
    tmp.transition()
        .duration(10)
        .attr("cx", function (d, i) { return xx(i); })
        .attr("cy", yy)
    tmp.exit()
        .transition().duration(10).attr("r",0).remove();

    もし ( nChains == 2 ) {
        var tmp2 = chart.selectAll(".vis1points2").data(thetas[1], function (d, i) { return i; } );
        tmp2
        .enter().insert("svg:circle")
        .attr("クラス", "vis1points2")
        .attr("cx", function (d, i) { return xx(i); })
        .attr("cy", yy)
        .attr("r", 3)
        tmp2.transition()
        .duration(10)
        .attr("cx", function (d, i) { return xx(i); })
        .attr("cy", yy)
        tmp2.exit()
        .transition().duration(10).attr("r",0).remove();
    }
    };

軸は現在thetas、範囲とドメインの制限を推測するための入力として使用されます。

右側のヒストグラムの場合:

// 作成には...
    var dataLength = thetas[0].length;
    this.histBars = this.vis.selectAll("rect.vis2bars")
        .data(その.histVals.counts[0])
        .enter().append("svg:rect")
        .attr("クラス", "vis2bars")
        .attr("x", function (d, i) { return that.xx2(i); })
        .attr("y", function (d, i) { return that.yy2(that.maxDensity*(d/dataLength)/(d3.max(that.histVals.counts[0])/dataLength)); })    
        .attr("height",function (d, i) { return that.yy2(0)-that.yy2(that.maxDensity*(d/dataLength)/(d3.max(that.histVals.counts[0])) /dataLength)); })
        .attr("幅", Math.floor(innerWidth2/numBins));
    this.histBars.transition()
        .attr("y", function (d, i) { return that.yy2(that.maxDensity*(d/dataLength)/(d3.max(that.histVals.counts[0])/dataLength)); })    
        .attr("height",function (d, i) { return that.yy2(0)-that.yy2(that.maxDensity*(d/dataLength)/(d3.max(that.histVals.counts[0])) /dataLength)); })
        .duration(dur);

そして更新：

    this.update = function( dur2 ) {
    var dataLength = thetas[0].length;
    var tmp2 = this.histBars.data(this.histVals.counts[0]);
    var tmp3;
    if ( nChains > 1 ) { // 修正
        tmp3 = this.histBars2.data(this.histVals.counts[1]);
    }
    var that = this;
    tmp2
        。遷移（）
        .delay( 0 ) // 微調整できます...
        .duration(dur2 - 10)
        .attr("y", function (d, i) { return that.yy2(that.maxDensity*(d/dataLength)/(d3.max(that.histVals.counts[0])/dataLength)); })    
        .attr("height",function (d, i) { return that.yy2(0)-that.yy2(that.maxDensity*(d/dataLength)/(d3.max(that.histVals.counts[0])) /dataLength)); });

    // 2 番目のデータセットの更新を追加
    if ( nChains > 1 ) {
        tmp3
        。遷移（）
        .attr("y", function (d, i) { return that.yy2(that.maxDensity*(d/dataLength)/(d3.max(that.histVals.counts[1])/dataLength)); })    
        .attr("height",function (d, i) { return that.yy2(0)-that.yy2(that.maxDensity*(d/dataLength)/(d3.max(that.histVals.counts[1])) /dataLength)); });
    }
4

1 に答える 1

0

円を更新するときに、円の色を動的に変更できます。たとえば、次のようになります。

tmp.transition()
    .duration(10)
    .attr("cx", function (d, i) { return xx(i); })
    .attr("cy", yy)
    .attr("fill", function(d) {
         if (d.isBiLengthPoint) {
              return "orange";
         } else {
              return "blue";
         }
     });

現時点では、CSS に基づいて円に色を付けていると思いますが、必要な効果を得るには、それらを動的にロードする方が良い解決策だと本当に思います。

または、サークルのクラスを動的に変更して、2 つの CSS クラスを宣言することもできます。

tmp.transition()
    .attr("class", function(d) {
         if (d.isBiLengthPoint) {
              return "vis1points-bilength";
         } else {
              return "vis1points";
         }
     })
    .duration(10)
    .attr("cx", function (d, i) { return xx(i); })
    .attr("cy", yy)

そしてあなたのCSSで

 vis1points {
     fill: blue;
 }
 vis1points-bilength {
     fill: orange;
 }
于 2013-09-03T09:58:51.410 に答える