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

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

jsfiddle的link。谢谢。

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。

使用嵌套数组的D3散点图

1 个答案: