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>

如果我用

替换行生成器“line”

"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/

用d3js绘制简单的线条

1 个答案: