Question

以下代码使用line-generator函数生成随机颜色d3路径，并在for循环中创建dataArray。如何使路径中的 EACH 行具有不同的随机颜色？

for (var i = 0; i < 1000; i++) {
     x = Math.random()*$(window).width();
     y = Math.random()*$(window).height();
     rc = d3.rgb( Math.random()*255, Math.random()*255, Math.random()*255 );
     dataArray[i] = { x:x, y:y, color:rc };
}

var svg = d3.select("body").append("svg").attr("height","100%").attr("width","100%");

var line = d3.line()
         .x(function(d,i){return d.x})
         .y(function(d,i){return d.y});

var path = svg.selectAll("path").data(dataArray).enter().append('path')
           .attr('d', function(d){return line(dataArray)})
           .attr('stroke-width', 5)
           .attr('stroke', function(d) { return d.color});

Answer 1

你需要创建只有2个点的线，而不是所有线（即创建多个路径，而不是一个）

line([dataArray[i], dataArray[i]]

请参阅此fiddle

D3路径随机彩色线条

1 个答案: