使用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");