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

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

我被困在我为自己创建的以下任务中

理想情况下，我想要的功能等同于：

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

奇怪的是，以下几点：

 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似乎离我习惯的编程模式有了很大的距离，而且调试起来更困难，所以如果有人能解释我哪里出了问题，那就太棒了

哦，虽然这个示例非常无用，我可以使用merge命令将其展平，以便完全理解D3操作。我想画两个没有合并的圆：

---

谢谢

看到你提到你是d3新手，我将对一些基础知识做一些评论

首先，我们试图在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.selectAllcircle为svg画布中的圆圈创建占位符。接下来，我们使用datamatrix将数据引入空占位符，并使用“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;
     });

你可以看到这一切都放在一起，在这里有一些小的变化

---

如果你想了解d3，我真的建议你在d3上买一本斯科特·默里的书，这是一本很棒的介绍

很棒的东西！现在开始更好地掌握D3了——在当地图书馆找到了一本《网络交互式数据可视化》一书的副本，我将对此进行深入研究。然而，我还有最后一个问题，如果数据源是在多维数组中，比如说，分组条形图。最好的方法是使用javascript处理它，首先将其拆分为数据项，然后在Y轴上以偏移量将其传递到D3中？或者有没有一种像我以前尝试过的那样改变绑定范围以允许绑定到元组数组的方法？

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