svg - 使用 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().data 需要一个二维数据数组，例如

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

您编辑的 fiddle 使用二维数组绑定(bind)的原因是因为您的 line使用数组的每个子元素调用函数:

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

这就解释了为什么您看到的线条仅用 2 个点绘制，而不是您可能预期的 6 个点。

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