使用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/