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

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

var size = 10;
dataset = [];
for(var y = 0; y

我不确定如何正确绑定数据.我有点理解Mike Bostock 关于嵌套选择的教程,但他将固定大小的矩阵绑定到已有的元素.我将如何使用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");

    

  




  
  
  

    

      

        Lars Kotthof..
         5
      
      
有两个问题.首先,您.selectAll()在第一个之后立即拥有第二个.data(),这意味着您将在更新选择上运行.这是空的,因为DOM中没有元素可以开始.您需要对输入选择进行操作(并且最好g在此处使用元素作为第一级):

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


其次,你是沿着对角线放置矩形(相同的x和y坐标),所以即使有正确数量的rect元素,你也看不到所有元素,因为它们重叠.要修复,您需要将父组中的索引考虑到其中一个坐标(使用秘密的第三个参数):

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


在这里完成演示.


1> Lars Kotthof..：
有两个问题.首先,您.selectAll()在第一个之后立即拥有第二个.data(),这意味着您将在更新选择上运行.这是空的,因为DOM中没有元素可以开始.您需要对输入选择进行操作(并且最好g在此处使用元素作为第一级):

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


其次,你是沿着对角线放置矩形(相同的x和y坐标),所以即使有正确数量的rect元素,你也看不到所有元素,因为它们重叠.要修复,您需要将父组中的索引考虑到其中一个坐标(使用秘密的第三个参数):

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


在这里完成演示.