加入圈子多圖與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

回答

相關問題