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隨機色線路徑

回答

相關問題