Question

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

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

如果我的问题的答案很明显，或者它是否嵌入代码中我无法看到，我道歉。

谢谢。

Answer 1

查看源代码。这两个相关部分是

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]);

Answer 2

看一下源代码，我发现d3正在加载this JSON file，其中包含有关关系的所有信息。

查看在源代码中处理此数据的脚本（请查看页面源代码底部的标记）。

d3.js悲惨世界JQuery Visualization

2 个答案: