D3随机色线路径

以下代码使用line-generator函数和for循环中创建的dataArray生成随机颜色d3路径。我怎样才能让EACH行的路径有不同的随机颜色？D3随机色线路径

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

来源

2016-11-23 user2367663

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

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

看到这个fiddle

来源

2016-11-23 22:10:07

正如你提到的，我可以走几条路径，但是，我试图找出是否有可能有一个单一的多色路径动画一次。例如，我有以下代码来绘制我的路径，如果我使用几个长度为零的路径，它将变为非活动状态。 'var totalLength = path.node（）。getTotalLength（）; 路径 .attr（ “中风dasharray”，totalLength + “” + totalLength） .attr（ “中风dashoffset”，totalLength） .transition（） .duration（10000） //。缓解（” bounceOut“） .attr（”stroke-dashoffset“，0）;' – user2367663

@ user2367663你不能在svg中有多行颜色 –

D3随机色线路径

回答

相关问题