d3.js多線圖呈現：相同的數據集，但不同的曲線

Question

我完全新的d3.js和目前正在多線圖表上d3.js，因此準備了兩個不同的數據集（「數據集」，「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

您正在繪製兩個略有不同尺度的線條。

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

這使得每一行只是一點點不同的位置的計算和該差值依賴於兩個數據集的區段之間的隨機差異。

傳遞相同的數據到兩個尺度（或者僅僅使用相同的刻度爲兩條線）解決該問題。這裏有一個更新的小提琴與單一的變化：https://jsfiddle.net/oa0rsvgc/