积点

Question

我试图绘制上线小圆圈折线图中表示的数据点，使用下面的代码：

// Add the scatterplot 
    g.selectAll("dot") 
    .data(newdata[0].values) 
    .enter().append("circle") 
    .attr("r", 5) 
    .attr("cx", function(d) { 
     return x(d.date); 
    }) 
    .attr("cy", function(d) { 
     return y(d.value); 
    })    
    //.attr("stroke", "blue") 
    //.attr("stroke-width", 2) 
    //.attr("fill", "none") 
    .on("mouseover", function(d) { 
     div.transition() 
     .duration(200) 
     .style("opacity", .9); 
     div.html(formatTime(d.date) + "<br/>" + d.value) 
     .style("left", (d3.event.pageX) + "px") 
     .style("top", (d3.event.pageY - 28) + "px"); 
    }) 
    .on("mouseout", function(d) { 
     div.transition() 
     .duration(500) 
     .style("opacity", 0); 
    }); 

但问题是，我只能通过一次元素的值：.data(newdata[0]).values)。这只会在一行上绘制点。我可以把整个代码循环，并使用计数器i而不是0.但这将是一个非常糟糕的解决方案。下面是我的数据结构：

[{ 
    "id": "primary", 
    "values": [{ 
    "date": "2011-03-31T18:30:00.000Z", 
    "value": 58.13 
    }, { 
    "date": "2011-04-30T18:30:00.000Z", 
    "value": 53.98 
    }] 
}, { 
    "id": "secondary", 
    "values": [{ 
    "date": "2011-03-31T18:30:00.000Z", 
    "value": 28.13 
    }, { 
    "date": "2011-04-30T18:30:00.000Z", 
    "value": 35.13 
    }] 
}]; 

Here is the JSFiddle.

请建议做什么！ :)

Answer 1

如何第一平整您的数据进行了reduce：

var values = newdata.reduce(function(arr, d){ 
    return arr.concat(d.values); 
}, []); 

这会给你你需要构建您的积分中的所有对象的数组：

[{"date":"2011-03-31T18:30:00.000Z","value":58.13}, 
{"date":"2011-04-30T18:30:00.000Z","value":53.98}, 
{"date":"2011-03-31T18:30:00.000Z","value":28.13}, 
{"date":"2011-04-30T18:30:00.000Z","value":35.13}] 

那当然只需绑定这些值即可创建所有圈子：

g.selectAll("dot") 
.data(values) 
... // etc