Basic D3 - 在对象内部使用数组

Question

我是 D3 的新手，我现在被困在一个我认为非常基础的特定主题上。我整天都在研究可以帮助我的东西，但我发现的一切最终都不是我所需要的，无论如何，如果已经被问到，我从现在开始道歉。

基本上，到目前为止，我一直在使用数组创建散点图，例如：

 var dataset = [[100,220],[130,350],[70,60],[100,140],[520,300],[120,280],[390,170]];

然后：

     var chart = d3.select("body")
    .append("svg")
    .attr("width",w)
    .attr("height",h);

    var plot = chart
    .selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx",function(d){return d[0];})
    .attr("cy",function(d){return d[1];})
    .attr("r",function(d,i){return i*4});

如果现在我想使用由对象而不是数组组成的数据集，它在进行一些调整后仍然可以正常工作：

var dataset = [
    {x:100,y:220},
    {x:130,y:350},
    {x:70,y:60},
    {x:100,y:140},
    {x:520,y:300},
    {x:120,y:280},
    {x:390,y:170}
    ];

更新后的代码：

    var chart = d3.select("body")
    .append("svg")
    .attr("width",w)
    .attr("height",h);

    var plot = chart
    .selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx",function(d){return d.x;})
    .attr("cy",function(d){return d.y;})
    .attr("r",function(d,i){return i*4});

然后我更进一步，创建了多个具有多个 x 和 y 坐标的对象（我对这种特殊情况很感兴趣，因为我未来的工作数据集 [真实数据集] 由一系列风组成每个涡轮机都有数千个 x-y 点）。

var dataset = [ {Turbine: "01", x:[100,130,70,100],y:[220,350,60,140]},
                        {Turbine "02", x:[520,120,390,500], y:[300,280,170,400]};

到目前为止，我不知道应该对上面的代码进行哪些改进才能正常工作。我意识到 d.x 和 d.y 现在不提供单个 x 和单个 y 点，它们提供数组，这就是为什么以前的代码现在无用，因为属性 cx 和 cy 每次迭代只期望一个坐标.我正在尝试找到一种方法，以某种方式能够在子选择中使用新索引（对于 d 中的每个 i，代码应使用 ii 从子选择 d[i].x[ii 中仅获取一个点]).

有什么想法吗？感谢您提前抽出时间！

Answer 1

您需要考虑如何将您的真实数据转化为散点图。我的建议是，将所有数据展平成单独的点，并用不同的颜色区分两个涡轮机。

var colors = ['orange', 'green'];

function convertData(dataset) {
  var data = [];
  dataset.forEach(function(oneDataset, datasetIndex) {
    // Split the x and y arrays into pairs
    // (that's assuming oneDataset.x and oneDataset.y are the same length!)
    for (var i=0; i<oneDataset.x.length; i++) {
      data.push({
        x: oneDataset.x[i],
        y: oneDataset.y[i],
        color: colors[datasetIndex]
      });
    }
  });
}

var rawDataset = [ {Turbine: "01", x:[100,130,70,100],  y:[220,350,60, 140]},
                   {Turbine: "02", x:[520,120,390,500], y:[300,280,170,400]};

var dataset = convertData(rawDataset);

现在重新使用您的 "solution 2" 代码，但使用新的颜色改进：

var plot = chart
  .selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle")
  .attr("cx",   function(d)   {return d.x;})
  .attr("cy",   function(d)   {return d.y;})
  .attr("r",    function(d,i) {return i*4})
  .attr("fill", function(d)   {return c.color});

这只是一种解决方案。但是在所有情况下，您可能都需要 "flatten" 将您的长数组转换成坐标对以呈现散点图。

Basic D3 - 在对象内部使用数组

Basic D3 - Working with arrays inside objects

arrays

object

selection

d3.js