d3:如何可视化一个简单的二维矩阵

d3: how to visualize a simple 2D matrix?

本文关键字：二维 简单 一个 可视化 d3      更新时间：2023-09-26

我一直在尝试在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关于嵌套选择的教程，但他将固定大小的矩阵绑定到现有元素。如何使用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");

有两个问题。首先，在第一个.data()之后有第二个.selectAll()，这意味着您将对更新选择进行操作。这是空的，因为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;
})

在此处完成演示。

相关文章：