D3js循环散点图的可变长度系列

Question

我的数据可以有可变数量的系列。在每个系列中都有一个日期和数字，我想在 D3js 中将其绘制为散点图。

这是我的（非工作）代码。当我直接这样做时它会起作用，但一旦我添加 $.each 循环就不会起作用。我很确定索引或类似问题存在某种问题。

 var color = d3.scale.category20();
 // Now actually add the data to the graph
 $.each(mpgData, function(k, v) {
     console.log(v);
     //console.log(k);
     svg.selectAll('circle')
                 .data(v)
                 .enter()
                 .append('circle')
                 .attr('cx', function(d, i) {
                     console.log(i);
                     //console.log(d);
                     return xScale(getDate(d[1]));
                 })
                 .attr('cy', function(dd, ii) {
                     //console.log(ii);
                     return yScale(dd[2]);

                 })
                 .attr('fill', function(d, i) {
                     return color(k);
                 })
                 .attr("class", "mpgColorClass"+k)
                 .attr("r", 5)
                 .on("mouseover", function() {
                     d3.selectAll(".mpgColorClass"+k)
                         .attr("r", 8);
                 })
                 .on("mouseout", function() {
                     d3.selectAll(".mpgColorClass"+k)
                         .attr("r", 5);
                 });
 });

我只展示了我认为相关的部分。

这样代码就可以工作了。但它只显示了 6 个东西，我认为这是因为第 2 个 'series' 有 6 个项目。所以不知何故，它并没有遍历“attr('cx', function(d, i)) 部分的所有内容。我想我不明白如何让该函数遍历系列的每个部分。

我是 D3js 的新手，所以仍在努力学习。但它有效，我得到了一张包含正确数据的图表。它只是不是所有数据，整个（可变）数据集中只有 6 个点。

谢谢！

Answer 1

在您的 $.each() 块中，您将覆盖 SVG 元素中的同一组圆圈。因此，您可以这样做，而不是使用 selectAll('circle')：

 $.each(mpgData, function(k, v) {
     svg.selectAll('circle' + k)
                 .data(v)
                 .enter()
                 .append('circle')
                 .attr('class','circle' + k)
 });

截断了代码中的其余详细信息...随意编辑。

D3js循环散点图的可变长度系列

D3js loop through variable length series for scatter plot

d3.js

scatter-plot