用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ğı,看它是否会出错,但我没有任何错误.似乎没有调用x和y函数.有或没有gğıgğı所有我设法做的是创建空路径元素.

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

如果我用线路发电机"线"替换

"M0,0l100,100"

线条成功绘制.

示例代码位于http://jsfiddle.net/99mnK/1/

我在这做错了什么？

编辑 工作版本位于http://jsfiddle.net/99mnK/2/.似乎d3.svg.line().数据需要一个2d数据数组,如

[[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数组绑定一样,是因为你的line函数是用数组的每个子元素调用的:

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

这就解释了为什么你看到的线条只有2分,而不是6分,就像你预期的那样.

最后,这是一个经过编辑的小提示,展示了如何绘制6条路径,正如您的示例可能尝试的那样:http://jsfiddle.net/mharen/3cv3T/5/