用D3繪制波形

Question

我是d3的新手，覺得有點不知所措。 我有一個數組，每個樣本包含y1和y2。

waveformData = [[79, 140], [67, 145], [70, 152], ..... ]

目前，我正在繪制它，如下所示：

waveformData.forEach(function(data,i){
    svg.append("line")
        .attr('y1', data[0])
        .attr('y2', data[1])
        .attr('x1', i +0.5)
        .attr('x2', i +0.5)
        .attr("stroke-width", 1)
        .attr("stroke", "green");
}

它可以工作，但是我沒有在d3的“精神”中做到這一點。 有人可以解釋如何將d3用於此類用途嗎？

Answer 1

D3方式為：

svg.selectAll('line')
  .data(waveformData)
.enter().append('line')
  .attr('y1', function(d) { return d[0]; })
  .attr('y2', function(d) { return d[1]; })
  .attr('x1', function(d, i) { return i +0.5; })
  .attr('x2', function(d, i) { return i +0.5; })
  .attr("stroke-width", 1)
  .attr("stroke", "green");