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部'系列'有6件。所以它不会在“attr（'cx'，function（d，i））部分的所有内容上循环。我想我不知道如何让这个函数循环遍历系列的每个部分。

我是D3js的新手，所以仍然在学习曲线上挣扎。但它有效，我得到了一个正确的数据图表。它只是不是所有数据，只占整个（可变）数据集中的6个点。

谢谢！

Answer 1

在你的$ .each（）块中，你将覆盖SVG元素中的同一组圆圈。因此，您可以执行以下操作，而不是使用selectAll（＆＃39; circle＆＃39;）：

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

代码中的其他细节被截断...随意编辑。

D3js循环通过可变长度系列用于散点图

1 个答案: