javascript - 具有嵌套数组的 D3 散点图

Question

我尝试使用 D3 创建散点图，但只显示其中两个点。

我的数据具有这种格式

  var data = [
      {
        key: "group1",
        x: [10,20],
        y: [10,30],
        label: ["point1", "point2"]
      },
      {
      {
        key: "group2",
        x: [5,10,25],
        y: [20,25,15],
        label: ["point3", "point4", "point5"]
      },
      },
     ]; 

x 和 y 在一起，例如在“goup1”中，点是 (10,10) 和 (20,30)，在“goup2”中，点是 (5,20)、(10,25)，和(25，15)。我想在散点图上绘制所有五个点。

我用这个来画点

var scatterPlotCircles = this.scatterChartContainer.selectAll(".scatterPlotDots")
        .data(data)
        .enter().append("circle")
        .attr("class", "scatterPlotDots")
        .attr("cx",function(d,i){
            return scatterChartXScale(d.x[i]);
        })
        .attr("cy",function(d,i)
              {
                  return scatterChartYScale(d.y[i]);
              })
        .attr("r", 5)
        .attr("fill", function(d,i){ return color(d.key); })
        .style("opacity", 1);

我认为我没有正确访问数据。有谁知道如何正确访问数据并将其绘制在图表上？

link到jsfiddle。谢谢。

Answer 1

我发现最简单的选择是重组数据以匹配预期的 SVG。

// restructure the data to make life easier
data = data.map(function(d) {
    return {
        key: d.key,
        points: d.label.map(function (l, i) {
            return {
                label: l,
                x: d.x[i],
                y: d.y[i]
            };
        })
    };
});

然后只需创建一个 <g> 即可每个组的容器。

var scatterPlotGroups = scatterChartContainer.selectAll(".scatterPlotGroup")
    .data(data)
    .enter().append("g")
    .attr("class", "scatterPlotGroup");

var scatterPlotCircles = scatterPlotGroups.selectAll("circle")
    .data(function(d) { return d.points; })
    .enter().append("circle")
    .attr("cx", function(d) { return scatterChartXScale(d.x); })
    .attr("cy", function(d) { return scatterChartYScale(d.y); })
    .attr("r", 5)
    .attr("fill", function() { return color(d3.select(this.parentNode).datum().key); });

工作 JSFiddle here .