將圓圈添加到線條

Question

我完全是D3的新手，我正在做一些基本的數據輸入。我無法將圓圈添加到具有我擁有的數據的行中，因爲我無法獲取該數據。

var fruits = {"apple", "banana", "grapes"} 

我希望圖像顯示這樣的東西。

問題是，如果添加更多的數據，如var fruits = {"apple", "banana", "grapes", "mango", "orange"}那麼該行應自動自動適合數據。

我用id做了一行，這樣我就可以得到x和y座標，但是我無法將x，y的座標均勻地分配給空間圓。

有人可以幫我解決這個問題嗎？

Answer 1

這裏最好的想法是使用點標度。在這種規模下，您將傳遞數據數組作爲域，並將其映射到給定範圍。

在你的情況，這樣的事情：

var scale = d3.scalePoint() 
    .domain(["apple", "banana", "grapes", "mango", "orange"]) 
    .range([minHeight, maxHeight]); 

然後，你將不得不使用scale(d)都放置文本和y的圓圈座標，d是在匿名函數的第一個參數，如下所示：

.attr("y", function(d){ return scale(d)}) 

如果更改數據數組，添加或刪除元素，則會自動調整比例。