将圆圈添加到d3.js的多线图 [英] Adding circles to multiline graph with d3.js

问题描述

所以我想为此图表上的每个数据点添加圈子：

so I'm trying to add circles to each datapoint on this graph:

http://bl.ocks.org/mbostock/3884955

有关如何执行此操作的任何想法吗？非常感谢。

Any idea on how to do this? Thanks.

这是我现在尝试的：

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

推荐答案

：

You can append circles for each point of a given city:

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

顺便说一句，此方法不适用于基础插值，因为点似乎远离线。你可能需要做更多的工作，如果你需要插值，但我怀疑，突出曲线的每个点肯定意味着你想要有他们的确切的位置。

By the way, this method does not work with the basis interpolation as points seem to be far from the line. You might have to do more work if you need the interpolation but I doubt that as highlighting each points of the curve certainly means that you want to have their exact position.

编辑：
为了使圆形与行的颜色相同，您需要访问数据of parentNode：

In order to have a the circle to be the same color as the line, you need to access the data of the parentNode:

.attr("stroke", function(d){return color(this.parentNode.__data__.name)})

新结果： http://bl.ocks.org/ChrisJamesC/5896521/83d7c5c04f7d031d3c71b4d6fd5b5193366d9fed

这篇关于将圆圈添加到d3.js的多线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！