javascript - d3 : how to visualize a simple 2D matrix?

Question

我一直在尝试在 d3 中绑定(bind)二维数据。我想显示一个绿色方 block 矩阵。我正在构建这样的矩阵:

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

我不确定如何正确绑定(bind)数据。我有点理解迈克博斯托克的tutorial on nested selections ，但他将固定大小的矩阵绑定(bind)到已经存在的元素。我将如何使用 enter() 创建新的矩形？这就是我尝试应用教程的建议来首先绑定(bind)外部数组，然后绑定(bind)内部数组的方法。它不起作用并不奇怪，但我也不知道从这里该去哪里..

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

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

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

其次，您将矩形沿对 Angular 线放置(相同的 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 .