Question

我有一个这种格式的对象数组

var data = [
    {
        start: {
            row: 10,
            column: 10
        },
        end: {
            row: 11,
            column: 10
        }
    },
    {
        start: {
            row: 13,
            column: 10
        },
        end: {
            row: 15,
            column: 10
        }
    },
    ....

]

我正在尝试使用d3创建一个svg路径行。基本上每个数组项目我想创建至少三个点。类似于该行的内容从data[i].start开始，然后移至另一个依赖于data[i].start and end的点，最后结束于data[i].end

所以我正在做这样的事情..

var line = d3.svg.line().x(function(d){return d;}).y(function(d){return d;})
svg.attr("d", line(data))

但是这个line允许我只翻过data[i]一次..所以我可以多次遍历同一个数组项目。

Answer 1

您应该在将数据传递给线函数之前对其进行插值。类似的东西：

newData = data.map(function(d){
    line = [];
    start = {x:d.start.row,y:d.start.column}
    middle = {x:d.end.row-d.start.row,y:d.end.column-d.start.column} 
    end = {x:d.end.row,y:d.end.column}
    return [start,middle,end]
})

现在，您还需要更新线路访问器以获取x和y属性：

var line = d3.svg.line().x(function(d){return d.x;}).y(function(d){return d.y;})

最后，画出一行：

svg.attr("d", line(newData))

d3多次循环同一项目

1 个答案: