4

我正在尝试使用 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]
4

1 回答 1

11

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/

于 2012-11-27T00:26:52.187 回答