1

http://bost.ocks.org/mike/miserables/のような視覚化を作成したいと思います。この実装では、各長方形は色と関連する不透明度で塗りつぶされます。特定の四角形を塗りつぶすために、開発者は、たとえば x="579.7402597402597" または y=... と四角形の寸法を指定します。

開発者がそれぞれの場合に関連する単語のペアの x と y を動的に計算するために使用するものを知っていますか、または推測できますか?

私の質問への答えが明白であるか、それがコードに埋め込まれていて見えない場合は、申し訳ありません。

ありがとうございました。

4

2 に答える 2

2

ソースコードを見てみましょう。関連する 2 つの部分は次のとおりです。

var row = svg.selectAll(".row")
  .data(matrix)
.enter().append("g")
  .attr("class", "row")
  .attr("transform", function(d, i) { return "translate(0," + x(i) + ")"; })
  .each(row);

と

var cell = d3.select(this).selectAll(".cell")
    .data(row.filter(function(d) { return d.z; }))
  .enter().append("rect")
    .attr("class", "cell")
    .attr("x", function(d) { return x(d.x); })
    .attr("width", x.rangeBand())
    .attr("height", x.rangeBand())
    .style("fill-opacity", function(d) { return z(d.z); })
    .style("fill", function(d) { return nodes[d.x].group == nodes[d.y].group ? c(nodes[d.x].group) : null; })
    .on("mouseover", mouseover)
    .on("mouseout", mouseout);

座標は、データのセル インデックス / x 属性をスケールに渡すことによって計算されます。つまり、

var x = d3.scale.ordinal().rangeBands([0, width]);
于 2012-07-20T19:18:09.457 に答える
0

ソースを見ると、d3 が関係に関するすべての情報を含む この JSON ファイルを読み込んでいることがわかりました。

ソース内のこのデータを操作するスクリプトを見てください (ページのソースの下部にあるタグを見てください)。

于 2012-07-20T19:16:26.770 に答える