凡例を追加して線をランダムな色にする方法をD3.JSに追加

Question

次のデータセットに追加するたびに、グラフに新しい行が追加されます。これが毎回異なるランダムな色になるためには、どのような変更が必要ですか？ランダムな線の凡例をどのように/どこに追加する必要がありますか？

ワーキングフィドルhttps://jsfiddle.net/qvrL3ey5/

var dataset = [ 
[{ x: 0, y: 100 }, { x: 1, y: 833 }, { x: 2, y: 1312 }, { x: 3, y: 1222 }, { x: 4, y: 1611 }], 
[{ x: 0, y: 200 }, { x: 1, y: 933 }, { x: 2, y: 1412 }, { x: 3, y: 1322 }, { x: 4, y: 1711 }]] 

コード：

var dataset = [ 
[{ x: 0, y: 100 }, { x: 1, y: 833 }, { x: 2, y: 1312 }, { x: 3, y: 1222 }, { x: 4, y: 1611 }], 
[{ x: 0, y: 200 }, { x: 1, y: 933 }, { x: 2, y: 1412 }, { x: 3, y: 1322 }, { x: 4, y: 1711 }]] 

var margin = { top: 20, right: 100, bottom: 30, left: 100 }, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var xScale = d3.scale.linear() 
    .domain([0, d3.max(dataset, function(series) { 
     return d3.max(series, function (d) { return d.x; }) 
    })]) 
    .range([0, width]); 

var yScale = d3.scale.linear() 
    .domain([0, d3.max(dataset, function(series) { 
     return d3.max(series, function (d) { return d.y; }) 
    })]) 
    .range([height, 0]); 

var xAxis = d3.svg.axis() 
    .scale(xScale) 
    .ticks(0) 
    .orient("bottom") 
    .outerTickSize(0) 
    .tickPadding(0); 

var yAxis = d3.svg.axis() 
    .scale(yScale) 
    .orient("left") 
    .outerTickSize(0) 
    .tickPadding(10); 

var line = d3.svg.line() 
    .x(function (d) { console.log(d.x, xScale(d.x));return xScale(d.x); }) 
    .y(function (d) { return yScale(d.y); }); 

//Create SVG element 
var svg = d3.select("#visualisation") 
      .append("svg") 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.top + margin.bottom) 
      .append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top  + ")"); 

svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 

svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 

svg.selectAll("path.line").data(dataset).enter() 
    .append("path") 
    .attr("class", "line") 
    .attr("d", line); 

編集： 色を追加する方法を発見..

var color = d3.scale.category10(); 

    .attr("d", line) 
    .style("stroke", function (d) { 
     return color(d); 

はまだ凡例を追加する方法を研究。

編集：データセットが異なる長さである場合を除き

残念ながら色のは、同じである。私は、データセットA）25点とB）は、2つの異なる色を生成する30点を持っている場合、しかし、A & Bの両方が25ポイントの場合、その同じ色..任意のアイデア？

Answer 1

色について：var color = d3.scale.category10()は空のドメインと10色の範囲で序数を作成しますが、ドメインが設定されていない場合はcolorというシーケンスに従ってドメインが自動的に作成されます。だから、私たちは、ドメインを設定する必要があります。

var color = d3.scale.category10(); 
color.domain(d3.range(0,10)); 

そしてランダムにラインを描く：

.style("stroke", function (d) { 
    return color(Math.floor(Math.random()*10))}); 

これはラインのためのあなたの要求を満たす：

異なるランダム色に毎回

このフィドルを確認すると、色を「実行」するたびにhttps://jsfiddle.net/gerardofurtado/qvrL3ey5/1/

凡例については、詳細をお知らせください。