加入圈子多图与d3.js

所以我想添加到圈子到每个数据点在该图中：加入圈子多图与d3.js

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

来源

2013-06-30 nat

欢迎在StackOverflow上。你有什么尝试？ –

@ChristopherChiche我试过用这个： var circles = focus.selectAll（“g”） .data（values） .enter（） .append（“g”）; （“cx”，function（d）{return d.date;}） .attr（“cy”，function（d）{return d.temperature;}）（“r”，function（d）{return 4;}）; 但这不起作用。还有很多其他的代码变体。 – nat

您可以将代码添加到您的问题吗？ –

您可以附加圈为某个城市的每一个点：

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

来源

2013-06-30 19:55:47

太棒了，谢谢。你知道我会如何将圆圈的颜色改变为它们各自的线条的颜色？ – nat

您必须访问家长的数据。见编辑:) –

@ChristopherChiche嗨，如果我需要添加基础插值圆，我应该怎么做？我是d3js的新手。 –

加入圈子多图与d3.js

回答

相关问题