使用 d3.js 处理多维数据数组

Question

目前我正在学习一些“D3.js”并试图了解数据的处理和选择方式。

我坚持执行我为自己创建的以下任务。

理想情况下，我想要的东西在功能上等同于：

    <svg>
        <circle r=​"20.5" cx=​"100" cy=​"200">​</circle>​
        <circle r=​"20.5" cx=​"300" cy=​"10">​</circle>​
    </svg>

我目前拥有的（按照我的逻辑）是：

    var matrix = [ [{ "x": 100, "y": 200 }], [{ "x": 300, "y": 10 }]];

    var result = d3.select("body").append("svg")  // Append SVG to end of Body
       .data(matrix) // select this data
       .selectAll("g") //g is a svg grouping tag
       .data(function (d) { return d; }) //Unwrap the first part of the array
       .enter() // Grab all the data that is new to the selection in each array
       .selectAll("g") 
       .data(function (d) { return d;}) // foreach each item inside the 1D array
       .enter() // For all the data that doesn't exist already in the SVG
       .append("circle") // Append Circle to the DOM with the following attributes
       .attr("r", 20.5)
       .attr("cx", function (d) { return d.x; })
       .attr("cy", function (d) { return d.y; });
    };

奇怪的是：

 var result = d3.select("body").append("svg")
        .data(matrix)
        .selectAll("g")         
        .enter()            
        .append("circle")
        .attr("r", 20.5)
        .attr("cx", function (d) { return d.x; })
        .attr("cy", function (d) { return d.y; });
    };

似乎能够以某种方式获取数组中的第一项，但无法正确迭代。我不太确定它是如何进入数组的。

D3 似乎与我习惯的编程范例相去甚远，而且更难调试，所以如果有人能解释我哪里出错了，那就太棒了。

哦，虽然这个例子毫无用处，我可以使用合并命令将它展平——为了完全理解 D3 操作。我想在没有合并的情况下画几个圆圈:)

谢谢！

Answer 1

看到你提到你是 d3 的新手，我会在基础上做一些 cmet。

首先是我们试图在 DOM 上放置一些 svg 元素，所以首先我们必须有一个 svg 画布来处理。通常它在代码的早期设置，看起来像这样：

var svg = d3.select("body")
             .append("svg")
             .attr("width", 350)
             .attr("height", 250);

请注意，最好为高度和宽度定义变量（但我很懒惰）。

现在你有了画布，让我们看看 d3 是如何迭代的。 d3 遍历一个数组，因此对于您的示例，您不必在数组中包含一个数组，如下所示：

 var matrix = [ { "x": 100, "y": 200 }], [{ "x": 300, "y": 10 }];

现在您的第二个代码块几乎就在那里，只需进行一些重新排列。我们需要做的第一件事是使用svg.selectAll("circle") 在您的svg 画布中为圆圈创建占位符。接下来，我们使用 data(matrix) 将数据引入空占位符，并使用 'enter()` 进行绑定。现在我们所要做的就是附加圆圈并给它们一些属性，这就是其余代码所做的一切

svg.selectAll("circle")
     .data(matrix)
     .enter()
     .append("circle")
     .attr("r", 20.5)
     .attr("cx", function (d) {
         return d.x;
     })
     .attr("cy", function (d) {
         return d.y;
     });

您可以在 fiddle 中看到所有这些内容，并进行了一些细微的更改。

如果您想了解 d3，我真的建议您购买 Scott Murray 关于 d3 的书，这是一个很好的介绍