用D3绘制波形

时间:2014-10-05 21:57:50

标签: javascript svg d3.js

我对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");
}

waveform

它有效,但我没有在“精神”中做到这一点。 d3。有人可以解释如何使用d3,因为它是用于这样的东西吗?

1 个答案:

答案 0 :(得分:5)

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