0

我正在使用 D3 通过将矩形推到一起来生成音乐波形。这是小提琴：http: //jsfiddle.net/s4dML/

var data = [ 0.0534973, /* ...lots and lots of data... */ 0.290771];
data = data.filter(function(datum, index){
    return index % 3 == 0;
});

var width      = 340,
    height     = 70,
    svg        = d3
        .select('body')
        .append('svg')
        .attr('width', width)
        .attr('height', height);

svg
    .selectAll('rect')
    .data(data.map(function(datum){
        return (datum * height)/2;
    }))
    // .data(dataset)
    .enter()
    .append('rect')
    .attr('x', function(d, i){
        return i * (width / data.length);
    })
    .attr('y', function(d){
        return (height /2) - d ;
    })
    .attr('width', function(d, i){
        return width / data.length;
    })
    .attr('height', function(d){
        return d*2;
    })
    .attr('fill', 'teal');

有谁知道为什么结果不像预期的那样单一，平坦的颜色？整个过程都有一种闪闪发光的效果。这可能是可取的，但不管我想知道它是如何到达那里的以及如果我愿意的话如何摆脱它。

4

2 回答 2

2

罗素的答案是一个很好的答案，尽管你最终会走上一条可怕的道路。这应该不是太大的问题。

前几天我在尝试使用非常细的条形图制作大约 500 个数据点的条形图时遇到了同样的问题。这样做的好处是更容易使鼠标悬停突出单个条。在这种情况下，我发现您必须对宽度和 x 位置使用整数值。

对于您的示例，将宽度和间隔设置为 1 可以完全解决问题，同时仅缩短大约 10%：

http://jsfiddle.net/s4dML/1/

.attr('x', function(d, i){
    return i;// * (width / data.length);
})
.attr('y', function(d){
    return (height /2) - d ;
})
.attr('width', function(d, i){
    return 1;
})

当然，这不是一个可扩展的解决方案——仅取决于您对小部件的计划。我在上面的示例中添加了一个鼠标悬停用于演示目的。

于 2013-06-14T21:15:05.687 回答
2

这是 SVG 渲染（或者实际上是任何矢量图形渲染）的产物。假设您有两个矩形，它们与像素的 40% 相交。然后第一个矩形将以 40% 的不透明度绘制到该像素中，第二个以 60% 的不透明度绘制，这意味着该像素只有 (40 + 0.6 * 60 =) 76% 的颜色，即使在逻辑上它是 100% 被彩色覆盖的形状。

解决此问题的方法是将图形定义为跟踪顶部和底部边缘的单个<path>对象，在矩形之间没有像这样的“裂缝”。

我不熟悉 D3，但在普通的 Javascript 中：

var path = "M 0," + (height / 2);

for(var i = 0; i < data.length; i++) {
  var x = (i + 1) * (width / data.length);
  var y = height / 2 - (data[i] * height)/2;
  path += " V " + y + " H " + x;
}

for(var i = data.length - 1; i >= 0; i--) {
  var x = i * (width / data.length);
  var y = height / 2 + (data[i] * height)/2;
  path += " V " + y + " H " + x;
}

path += " Z";
于 2013-06-14T20:39:09.313 回答