Нежелательный мерцающий эффект с использованием D3 для создания смежных прямоугольников

Question

Я генерирую музыкальную форму волны, используя 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'); 

Кто-нибудь знает, почему результат ins't сингл, плоский цвет, как ожидалось? Во всем есть мерцающий эффект. Это может быть желательно, но независимо от того, я хотел бы знать, как он туда попал и как избавиться от него, если я так склонен.

Answer 1

Это артефакт рендеринга 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"; 

Answer 2

ответ Рассела является хорошим, если вы будете в конечном итоге с чудовищным пути. Это не должно быть слишком большой проблемой.

Я столкнулся с той же проблемой на днях, пытаясь создать гистограмму около 500 точек данных, используя очень тонкие полосы. Преимущество этого заключается в том, что гораздо проще сделать наведение мыши, которое выделяет отдельную панель. В таких случаях я обнаружил, что вам нужно использовать целочисленные значения для значений width и 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; 
}) 

Конечно, это не расширяемый решение- - зависит только от ваших планов по виджету. Я добавил мышь в приведенном выше примере для демонстрационных целей.