Question

我一直试图在d3中绑定二维数据。我想显示一个绿色方块矩阵。我正在建立一个这样的矩阵：

var size = 10;
dataset = [];
for(var y = 0; y<size; y++){
    var tempData = [size];
    for(var x = 0; x<size; x++){
        tempData[x] = 5;
    };
    dataset.push(tempData);
};

我不确定如何正确绑定数据。我有点理解Mike Bostock的tutorial on nested selections，但他将固定大小的矩阵绑定到已有的元素。我如何使用enter()创建新的矩形？这就是我尝试应用教程的建议来首先绑定外部数组，然后是内部数组的方式..并不感到惊讶它不起作用但我也不知道从哪里开始..

svg.selectAll("rect")
   .data(dataset)
   .selectAll("rect")
   .data(function (d,i) {return d;})
   .enter()
   .append("rect")
   .attr("x", function(d,i){
            return i*20})
   .attr("y", function(d,i){
            return i*20;})
   .attr("height", 15)
   .attr("width", 15)
   .attr("fill", "green");

Answer 1

有两个问题。首先，您在第一个.selectAll()之后立即拥有第二个.data()，这意味着您将在更新选择上运行。这是空的，因为DOM中没有元素可以开始。您需要对输入选择进行操作（以及在此处使用g元素作为第一级的优良做法）：

svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("g")
  .selectAll("rect")
  .data(function (d,i) {return d;})

其次，你沿着对角线（相同的x和y坐标）放置矩形，所以即使有rect个正确数量的元素，你也看不到它们全部因为它们重叠要修复，您需要将父组中的索引考虑为其中一个坐标（使用secret third argument）：

.append("rect")
.attr("x", function(d,i){
        return i*20;
})
.attr("y", function(d, i, j){
        return j*20;
})

完整演示here。

d3：如何可视化简单的2D矩阵？

1 个答案: