基本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坐标（我感兴趣的是特定的情况下，因为我的未来工作的数据集[真钞]是由一系列的风力涡轮机，每个都有数千个xy点）。

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

现在重用你的 “解决方案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}); 

这仅仅是一个解决方案。但是您可能需要在所有情况下将您的长阵列“变平”为坐标对以呈现分散。