使用d3js繪製簡單線條

Question

我正在嘗試使用d3.svg.line（）並未成功繪製d3js的線條。

var line = d3.svg.line() 
    .x(function(d) { return Math.random() * 1000 }) 
    .y(function(d) { return Math.random() * 1000}); 

svg.selectAll("path") 
     .data([1,2,3,4,5,6]).enter() 
     .append("path") 
      .attr("d", line) # line generator 
      .attr("class", "line") 
      .style("stroke", "black"); 

我已經插入gğıgğı故意看看它是否會給出錯誤，但我didn'get任何錯誤。 似乎沒有調用x和y函數。有或沒有gğıgğı所有我設法做的是創建空路徑元素。

<path class="line"></path> 

如果我更換線發生器 「線」 與

"M0,0l100,100" 

線被成功地繪製。

示例代碼爲http://jsfiddle.net/99mnK/1/

我到底做錯了什麼？

編輯 工作版本爲http://jsfiddle.net/99mnK/2/。似乎d3.svg.line（）。數據期望作爲

[[1,1],[2,2],[3,3],[4,4],[5,5],[6,6]] 

代替

[1,2,3,4,5,6] 

Answer 1

d3.svg.line()本身是一個二維數據陣列這樣倒不由具有選擇器的工作。因此，您應該使用一組值來調用它 - 而不是像函數那樣將它作爲函數傳遞給.attr()函數。

所以，說你有：

var array = [1,2,3,4,5,6] 
var line = d3.svg.line() 
    .x(function(d) { return Math.random() * 1000 }) 
    .y(function(d) { return Math.random() * 1000}); 

然後，讓有6個隨機點的路徑描述，您只需：

line(array); 

，並把它應用到一個SVG path ：

.append('path') 
.attr('d', line(array)) 

你編輯的小提琴的工作原理，與2d數組綁定，因爲你有它，是bec澳洲英語你line函數被調用與陣列的每個子元素：

.line([1,1]) 
.line([2,2]) 
.line([3,3]) 

這就是爲什麼你看到的只有2個點繪製的線條，而不是6分，你可能已經預期。

最後，這裏是展示你怎麼可能畫出6路，因爲你的榜樣，也許是試圖做一個編輯的小提琴：http://jsfiddle.net/mharen/3cv3T/5/