使用d3js绘制简单的线条

Question

我尝试使用d3.svg.line()来绘制线条，但没有成功。

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().data期望一个二维数据数组，例如

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

替换为

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

- altunyurt

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))

你修改后的代码可以工作，因为你绑定了一个二维数组，并且你的 line 函数被每个子元素调用：

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

这就解释了为什么你看到的线只用了2个点而不是6个点，正如你可能期望的那样。

最后，这里有一个修改过的代码片段，展示了如何绘制6条路径，就像你的例子可能试图做的那样：http://jsfiddle.net/mharen/3cv3T/5/

- meetamit