d3.js複数の折れ線グラフレンダリング：同じデータセットだが異なるカーブ

Question

私はd3.jsを完全に新しくしていて、現在d3.jsの複数折れ線グラフで作業しているため、2つの異なるデータセット（ "dataset"、 "datasetIndividual" ）。私は、個々の曲線（緑色）の曲線が、再ロード後に描画される点と異なっていることに気づいた。

したがって、この問題は曲線であるか、またはドットであるかを決定するために、各曲線に対して同じデータセットを使用し始めたが、この問題は個々の曲線のレンダリングであるように見える。リロードのたびにカーブが完全に重なり、他の時間が異なる場合があります。私はこの特定の問題の理由も解決も決めることができません。私はそれがコードのネスト/シーケンスと関係があると仮定します。私は、コード全体が少し "歩行者"であると認めます。

折れ線グラフのためのコード：

/*create svg element*/ 
var svg = d3.select('.linechart') 
    .append('svg') 
    .attr('width', w) 
    .attr('height', h) 
    .attr('id', 'chart'); 

/*x scale*/ 
var xScale = d3.scale.linear() 
    .domain([0, d3.max(dataset, function(d) { 
    return d[0]; 
    })]) 
    .range([padding, w - padding]); 

/*y scale*/ 
var yScale = d3.scale.linear() 
    .domain([0, d3.max(dataset, function(d) { 
    return d[1]; 
    })]) 
    .range([h - padding, padding]); 

/*x axis*/ 
var xAxis = d3.svg.axis() 
    .scale(xScale) 
    .orient('bottom') 
    .ticks(20) 
    .tickSize(0, 0) 
    //.tickPadding(padding); 

/*append x axis*/ 
svg.append('g') 
    .attr({ 
    'class': 'xaxis', 
    //'transform': 'translate(0,' + (h - padding) + ')' 
    'transform': 'translate(0,' + 0 + ')' 
    }) 
    .call(xAxis); 

/*y axis*/ 
var yAxis = d3.svg.axis() 
    .scale(yScale) 
    .orient('left') 
    .tickSize(0, 0) 
    .tickValues([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]); 

/*append y axis*/ 
svg.append('g') 
    .attr({ 
    'class': 'yaxis', 
    'transform': 'translate(' + padding + ',0)' 
    }) 
    .call(yAxis); 


/*define line*/ 
var lines = d3.svg.line() 
    .x(function(d) { 
    return xScale(d[0]) 
    }) 
    .y(function(d) { 
    return yScale(d[1]) 
    }) 
    .interpolate('monotone'); 


/*append line*/ 
var path = svg.append('path') 
    .attr({ 
    'd': lines(dataset), 
    'fill': 'none', 
    'class': 'lineChart' 
    }); 

/*get length*/ 
var length = svg.select('.lineChart').node().getTotalLength(); 

/*animate line chart*/ 
svg.select('.lineChart') 
    .attr("stroke-dasharray", length + " " + length) 
    .attr("stroke-dashoffset", length) 
    .transition() 
    .ease('linear') 
    .delay(function(d) { 
    return dataset.length * 100; 
    }) 
    .duration(3000) 
    .attr("stroke-dashoffset", 0); 

/*add points*/ 
var points = svg.selectAll('circle') 
    .data(dataset) 
    .enter() 
    .append('circle'); 

/*point attributes*/ 
points.attr('cy', function(d) { 
    return yScale(d[1]) 
    }) 
    .style('opacity', 0) 
    .transition() 
    .duration(1000) 
    .ease('elastic') 
    .delay(function(d, i) { 
    return i * 100; 
    }) 
    .attr({ 
    'cx': function(d) { 
     return xScale(d[0]); 
    }, 
    'cy': function(d) { 
     return yScale(d[1]); 
    }, 
    'r': 5, 
    'class': 'datapoint', 
    'id': function(d, i) { 
     return i; 
    } 
    }) 


.style('opacity', 1); 

// LINES INDIVIDUAL 

//function drawIndividualLines(){ 

/*x scale*/ 
var xScaleIndividual = d3.scale.linear() 
    .domain([0, d3.max(datasetIndividual, function(d) { 
    return d[0]; 
    })]) 
    .range([padding, w - padding]); 

/*y scale*/ 
var yScaleIndividual = d3.scale.linear() 
    .domain([0, d3.max(datasetIndividual, function(d) { 
    return d[1]; 
    })]) 
    .range([h - padding, padding]); 

/*define line*/ 
var linesIndividual = d3.svg.line() 
    .x(function(d) { 
    return xScaleIndividual(d[0]) 
    }) 
    .y(function(d) { 
    return yScaleIndividual(d[1]) 
    }) 
    .interpolate('monotone'); 

/*append line*/ 
var pathIndividual = svg.append('path') 
    .attr({ 
    //'d': linesIndividual(datasetIndividual), 
    'd': linesIndividual(dataset), 
    'fill': 'none', 
    'class': 'lineChartIndividual' 
    }); 

/*get length*/ 
var lengthIndividual = svg.select('.lineChartIndividual').node().getTotalLength(); 

/*animate line chart*/ 
svg.select('.lineChartIndividual') 
    .attr("stroke-dasharray", lengthIndividual + " " + lengthIndividual) 
    .attr("stroke-dashoffset", lengthIndividual) 
    .transition() 
    .ease('linear') 
    .delay(function(d) { 
    return datasetIndividual.length * 100; 
    }) 
    .duration(3000) 
    .attr("stroke-dashoffset", 0); 

/*add points*/ 
var pointsIndividual = svg.selectAll('circleIndividual') 
    .data(dataset) 
    .enter() 
    .append('circle'); 

/*point attributes*/ 
pointsIndividual.attr('cy', function(d) { 
    return yScale(d[1]) 
    }) 
    .style('opacity', 0) 
    .transition() 
    .duration(1000) 
    .ease('elastic') 
    .delay(function(d, i) { 
    return i * 100; 
    }) 
    .attr({ 
    'cx': function(d) { 
     return xScale(d[0]); 
    }, 
    'cy': function(d) { 
     return yScale(d[1]); 
    }, 
    'r': 5, 
    'class': 'datapointIndividual', 
    'id': function(d, i) { 
     return i; 
    } 
    }) 


.style('opacity', 1); 

私はあなたの希望を誰かにフィドルを作成し、問題の原因を決定することができる：

https://jsfiddle.net/4vf6s6e9/

私はいずれかをapreciateだろう助けて。私は頻繁に質問を投稿しないで、私の最後の経験からの提案を組み込むことを試みた。この投稿を改善するために私から何かが必要な場合は、私に教えてください。

ありがとうございます。

Answer 1

の2本の線を少しずつの尺度で描画しています。

var xScale = d3.scale.linear() 
    .domain([0, d3.max(dataset, function(d) { 
    return d[0]; 
    })]) 
    .range([padding, w - padding]); 

/*y scale*/ 
var yScale = d3.scale.linear() 
    .domain([0, d3.max(dataset, function(d) { 
    return d[1]; 
    })]) 
    .range([h - padding, padding]); 

と

/*x scale*/ 
var xScaleIndividual = d3.scale.linear() 
    .domain([0, d3.max(datasetIndividual, function(d) { 
    return d[0]; 
    })]) 
    .range([padding, w - padding]); 

/*y scale*/ 
var yScaleIndividual = d3.scale.linear() 
    .domain([0, d3.max(datasetIndividual, function(d) { 
    return d[1]; 
    })]) 
    .range([h - padding, padding]); 

これはほんの少し異なる各ラインの位置の計算を行い、その差は、2つのデータセットのエクステントの間のランダムな差に依存します。

両方のスケールに同じデータを渡す（または両方のラインに同じスケールを使用する）だけで問題が解決されます。その1つの変更を加えたフィドルが更新されました：https://jsfiddle.net/oa0rsvgc/