Svg 用d3js绘制简单线条

我正在尝试使用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ğgğ，以查看它是否会出错，但我没有得到任何错误。 似乎没有调用x和y函数。不管有没有gğgğgğ305，我所能做的就是创建空路径元素

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

线条画得很成功

示例代码位于

我做错了什么

编辑 工作版本位于。似乎d3.svg.line（）.data需要一个2d数据数组，如

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

而不是

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

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
路径
：

.append('path')
.attr('d', line(array))

您编辑的小提琴在使用2d数组绑定时工作的原因是，正在使用数组的每个子元素调用
line
函数：

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

这就解释了为什么你会看到只有2个点的线条，而不是你所期望的6个点

最后，这里是一个经过编辑的提琴，展示了如何绘制6条路径，正如您的示例所尝试的那样：

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