0

これを例として使用します: http://mbostock.github.com/d3/talk/20111018/treemap.html

視覚化されたデータに応じて、ツリー マップ内の四角形の色を作成しようとしています。この例では、ツリー マップをサイズまたは数で描画できます。各エントリ json ファイルに「cola」と「colb」という 2 つの変数を追加しました。それぞれがただの色です。

グラフィックが最初に描画されると、サイズに基づいて並べ替えられ、コーラを使用して四角形に色が付けられます。サイズではなくカウントを使用してマップを再描画しても問題ありません。私が理解できないのは、コーラの代わりにコルブを使用する方法です。

これがコードの一部です。ここで、最初に色を選択します。

  cell.append("svg:rect")
      .attr("width", function(d) { return d.dx - 1; })
      .attr("height", function(d) { return d.dy - 1; })
      .style("fill", function(d) { return d.cola; });

これが変更機能です。

  d3.select("select").on("change", function() {
    treemap.value(this.value == "size" ? size : count).nodes(root);
    if (treemap.value(this.value == "size")) {
    cell.append("svg:rect").style("fill", function(d) {return d.cola; });
     }
    else {
     cell.append("svg:rect").style("fill", function(d) {return d.colb; });
    };
    zoom(node);

  });
});

まだd3を理解しようとしています。

ありがとう

4

2 に答える 2

2

コードで、使用する色を指定するある種の変数を使用できます (選択コントロールの状態に基づいて)。

var cola = (d3.select("select").node().value == "size");

と

cell.append("svg:rect")
    .attr("width", function(d) { return d.dx - 1; })
    .attr("height", function(d) { return d.dy - 1; })
    .style("fill", function(d) { return cola ? d.cola : d.colb; });

次に、選択ボタンでこの変数を切り替えることができます。

d3.select("select").on("change", function() {
  treemap.value(this.value == "size" ? size : count).nodes(root);
  cola = (this.value == "size");
  zoom(node);
});

ズーム機能の塗りつぶしスタイルも更新してください。

  t.select("rect")
      .attr("width", function(d) { return kx * d.dx - 1; })
      .attr("height", function(d) { return ky * d.dy - 1; })
      .style("fill", function(d) { return cola ? d.cola : d.colb; });
于 2013-01-29T02:19:40.387 に答える
0

問題は次の行にあると思います。

 if (treemap.value(this.value == "size")) ...

それは読むべきです：

if (this.value == "size") ...

また、おそらく体内cell.selectAll('rect').style(...)ではなくという意味です。ただし、コードの残りの部分を見ないと、確かなことは言えません。cell.append('rect').style(...)if-then-else

于 2013-01-28T23:42:47.353 に答える