Question

我正在将音频数据可视化为矩形波形和圆形宽度。音频数据通过Web Audio API作为音频节点传递。元素显示在屏幕上，但是我无法使用.exit（）。remove（）D3模式将其删除。这会导致应用程序明显滞后。创建每个唯一svg的代码如下：

const circles = svg.selectAll('circle')
    .data(frequencyData);

  circles.exit().remove();
  circles.enter().append('circle')
    .merge(circles)
    .attr('cx', svgWidth / 2)
    .attr('cy', svgHeight / 2)
    .attr('fill', 'none')
    .attr('stroke-width', 2)
    .attr('stroke-opacity', 1)
    .attr('r', d => rangeScale(d))
    .attr('stroke', d => d3.hsl(hslScale(d), 1, 0.85));


const rects = svgMonitor.selectAll('rect')
    .data(frequencyData);
  rects.remove();
  rects.enter()
    .append('rect')
    .attr('x', d => 150 - Math.random() * d)
    .attr('y', d => -waveLength(d))
    .attr('width', d => rangeScale(d))
    .attr('height', 3)
    .attr('fill', d => d3.hsl(hslScale(d), 1, 0.85))
    .attr('transform', 'rotate(90)');

  rects.enter()
    .append('rect')
    .attr('x', d => 150 - Math.random() * (max - d))
    .attr('y', d => -waveLength2(d))
    .attr('width', d => rangeScale(max - d))
    .attr('height', 3)
    .attr('fill', d => d3.hsl(hslScale(d), 1, 0.85))
    .attr('transform', 'rotate(90)');

此模式不会导致元素从屏幕上删除。但是，如果我写：

  circles.enter().append('circle')
    .merge(circles)
    .attr('cx', svgWidth / 2)
    .attr('cy', svgHeight / 2)
    .attr('fill', 'none')
    .attr('stroke-width', 2)
    .attr('stroke-opacity', 1)
    .attr('r', d => rangeScale(d))
    .attr('stroke', d => d3.hsl(hslScale(d), 1, 0.85))
    .remove();

这些元素已删除，但是它们在屏幕上停留的时间不够长，甚至看不到。我知道D3应该遵循enter（），update（），exit（）模式，这就是我上面的代码的结构方式。这应该以不同的方式写吗？谢谢。

无法使用.exit（）.remove（）API删除选定的D3 SVG元素

0 个答案: