以圓弧或半圓圖案對齊多個D3圓形

這是我的第一個d3可視化之一，它不是一個簡單的條形圖/折線圖，所以如果這個問題看起來很基本，請致歉。這裏的小提琴：http://jsfiddle.net/maureenlinke/jMMSJ/以圓弧或半圓圖案對齊多個D3圓形

我有大約100個數據點，每個我生成一個圓svg元素。但是，我希望圓形以弧形或半圓形的形狀動態排列。我不確定最好的方式去做這件事。將圓圈綁定到路徑或圓弧？我想這是動態的，所以我不想指定每個cx和cy座標。我也玩過轉換/翻譯選項，但這似乎也不起作用。這可能是一個簡單的計算，但我只需要更好地理解整體方法。

var svg = d3.select("#chart").append("svg"); 


var circles = svg.selectAll("circle") 
.data(data) 
.enter().append("circle") 
.attr("transform", "translate(220,400) scale(1, -1)") 
.attr("cx", function(d,i){return ((i*10)-1);}) 
.attr("cy", function(d,i){return (i*10);}) 
.attr("r", 6.15) 
.attr("transform", "translate(50,50)");

來源

2014-05-01 mtown

所有你需要的是一些簡單的三角學來確定圓的x和y座標：

.attr("cx", function(d,i){ return Math.cos(i/(data.length - 1) * cover) * circleRadius; }) 
.attr("cy", function(d,i){ return Math.sin(i/(data.length - 1) * cover) * circleRadius; })

這裏，circleRadius是圓的半徑點應該是和cover是它們應該覆蓋的弧段（以弧度表示）。這將在3點鐘位置開始圓圈，在這種情況下可能不是您想要的 - 添加一個偏移量使其成爲「頂部」圓弧。

除此之外，你只需要翻譯容器元素來容納圓圈。完整的演示here。

來源

2014-05-01 14:57:08

謝謝拉爾斯，這真的很有幫助。如果我想在剛繪製的半圓內創建一個新的圓，我會怎麼做？由於它的數據點超過100個，圓圈必須非常寬以容納所有這些數據點，因此我想將它們嵌套在一起。 – mtown

您只需更改新「行」的圓弧半徑。 –

我明白這一點，但如果行是數據的延續，而不是單獨的一行新數據 - 你怎麼表示？說如果數據[i]> 100開始一個新的圈子？ – mtown

以圓弧或半圓圖案對齊多個D3圓形

回答

相關問題