如何在数组中创建d3js中的一行

Question

我需要在var array = [[{ name: 'a', value: 1, where: '1st array' }, { name: 'b', value: 2, where: '1st array' }], [{ name: 'a', value: 1, where: '2nd array' }, { name: 'b', value: 2, where: '2nd array' }]], result = array.reduce( (r, a) => r.concat(a.map(({ name, value, where }) => ([name, value, where]))), [] ); console.log(result);图表中绘制水平线。

使用下面的代码，我能够绘制线条。

d3.js

但是我需要在图表中画出大约8行。

目前我已复制粘贴上述代码8次并手动输入值。

有没有办法从数组中传递坐标，而不是将其粘贴8？

我试图做这样的事情，但它不起作用。

方法1：

g.append("line")
        .attr("x1", x(0.5))  
        .attr("y1", y(1))
        .attr("x2", x(3.5))
        .attr("y2", y(1))
        .style("stroke-width", 5)
        .style("stroke", "blue")
        .style("fill", "none");

方法2：

var dataTest = [{x1:4,y1:3,x2:6,y2:3}]

g.append("g")
    .selectAll('line')
    .data(dataTest)
    .enter()
    .append('g').attr('class', 'line').append('g')
    .attr({'x1':function(d,i){ console.log(d); return d.x1; },
                             'y1':function(d){ return d.y1; },
                             'x2':function(d,i){ return d.x2; },
                             'y2':function(d){ return d.y2; },
                        })
    .style("stroke-width", 2)
    .style("stroke", "blue")
    .style("fill", "none");

其中，line函数返回x和y值。

g.append("line")
            .attr("d", line(dataTest))
            .style("stroke-width", 2)
            .style("stroke", "green")
            .style("fill", "none");