在 D3 多线图上创建点 [英] Create points on a D3 multiline graph
本文介绍了在 D3 多线图上创建点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在此示例中,我正在尝试使用 d3 向折线图添加点:http://bl.ocks.org/mbostock/3884955
I'm trying to add points to a line graph using d3 in this example: http://bl.ocks.org/mbostock/3884955
我也试图关注 这篇文章
你如何从文档中得到看起来像这张图片的点?http://github.com/mbostock/d3/wiki/line.png
How do you get the points to look like this picture from the documentation? http://github.com/mbostock/d3/wiki/line.png
圆的笔触应与线条颜色相匹配.
The stroke of the circle should match the line color.
var color = d3.scale.category10();
d3.csv("data.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
data.forEach(function(d) {
d.date = parseDate(d.date);
});
var ranks = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: d.date, ranking: +d[name]};
})
};
});
var rank = svg.selectAll(".rank")
.data(ranks)
.enter().append("g")
.attr("class", "rank");
rank.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
var point = rank.append("g")
.attr("class", "line-point");
point.selectAll('circle')
.data(function(d){ return d.values})
.enter().append('circle')
.attr("cx", function(d) { return x(d.date) })
.attr("cy", function(d) { return y(d.ranking) })
.attr("r", 3.5)
.style("fill", "white")
.style("stroke", function(d) { return color(d.name); });
推荐答案
.style("stroke", function(d) { return color(this.parentNode.__data__.name); })
这篇关于在 D3 多线图上创建点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文