1

我想创建一个像http://bost.ocks.org/mike/miserables/这样的可视化。在这个实现中，每个矩形都填充有颜色和相关的不透明度。为了填充特定的矩形，开发人员给出例如 x="579.7402597402597" 或 y=... 以及矩形的尺寸。

你知道或者你能猜出开发人员在每种情况下使用什么来动态计算相关单词对的 x 和 y 吗？

如果我的问题的答案很明显，或者如果它嵌入在代码中并且我看不到它，我深表歉意。

谢谢你。

4

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 回答