所以我试图在这个图上的每个数据点上添加圆圈:
http://bl.ocks.org/mbostock/3884955
关于如何做到这一点的任何想法?谢谢。
这是我现在尝试的:
var circles = focus.selectAll("g")
.data(values)
.enter()
.append("g");
circles.append("circle")
.attr("cx", function (d) { return d.date; })
.attr("cy", function (d) { return d.temperature; })
.attr("r", function (d) { return 4; });
最佳答案
您可以为给定城市的每个点附加圆圈:
city.append("g").selectAll("circle")
.data(function(d){return d.values})
.enter()
.append("circle")
.attr("r", 2)
.attr("cx", function(dd){return x(dd.date)})
.attr("cy", function(dd){return y(dd.temperature)})
.attr("fill", "none")
.attr("stroke", "black")
结果:http://bl.ocks.org/ChrisJamesC/5896521/943f325deacb4a533e086d56478c1e76b6c6b4bd
顺便说一句,此方法不适用于
basis
插值,因为点似乎离线很远。如果您需要插值,您可能需要做更多的工作,但我怀疑突出曲线的每个点肯定意味着您想要它们的确切位置。编辑:
为了让圆圈与线条颜色相同,您需要访问 parentNode 的数据:
.attr("stroke", function(d){return color(this.parentNode.__data__.name)})
新结果:http://bl.ocks.org/ChrisJamesC/5896521/83d7c5c04f7d031d3c71b4d6fd5b5193366d9fed
关于graph - 使用 d3.js 将圆圈添加到多线图中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17394006/