D3.js，水平放置元素

Question

我是D3.js新手，所以如果我問一些太基本的東西，請原諒。

我有一個簡單陣列作爲數據集：

[0, 10, 15, 20, 24, 35, 58] 

對於我的數組的每個元素我想創建一個圓和水平放置那些圈在相同的距離（12像素）從x = 10開始（而且你總是50）。我能怎麼做？

在此先感謝。

Answer 1

你需要知道的關於d3.js的基本知識是，它將數據綁定到svg元素並創建可視化。

要了解d3的基礎知識。你可以谷歌周圍。

下面是一些我更喜歡d3學習的網站。

d3 - Ofcourse官方網站。用所有的代碼和例子。

---

Dashing D3 - 免費爲基礎，你也可以得到進一步D3教程付費擴展。

---

d3noob - 你得到所有行簡報的PDF行一個免費的PDF。對於初學者來說，我最喜歡那個。

---

下面是問題的答案 - fiddle。

在d3中創建圓圈非常簡單。

這是我用過的代碼。

var svg = d3.select('.circle') 
     .append('svg') 
     .attr('height', 500) 
     .attr('width', 500) 

首先我追加SVG元素到.circle股利。

 
svg.selectAll('circle') 
.data(data) 
.enter() 
.append('circle') 
.attr("cx", function(d, i) { return 60 * i }) 
.attr("cy", 60) 
.attr("r", 20) 

然後根據使用上述代碼塊的數據數量添加圓圈。

注意：.attr是我添加的屬性。

我在這裏修復了半徑爲20。

但是你可以根據這樣的數據改變半徑。 function(d) { return d; }。

而當然你可以使用.style("fill", "#ddd")和其他的css東西使用.style()來爲這個圓圈着色。

您可以從我提供的網站獲取更多此信息。

希望這會有所幫助。