d3.js多折线图渲染：相同的数据集但不同的曲线

我对d3.js完全陌生，目前正在d3.js中处理一个多折线图，因此准备了两个不同的数据集（“数据集”，“数据集个人”）。我注意到单个曲线（绿色）的曲线与重新加载后绘制的点不同

因此，为了确定问题是曲线还是点，我开始对每条曲线使用相同的数据集，问题显然是单个曲线的渲染。每次重新加载后，有时曲线可能完全重叠，而其他时间则不同。我无法确定这个问题的原因或解决方案。我假设这与代码的嵌套/序列有关。我承认，整个代码有点“平庸”

折线图的代码：

/*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);

我准备了一把小提琴，希望你们中的某个人能够确定问题的根源：

我非常感激任何帮助。我不经常发帖提问，并试图从我上次的经历中得出一些建议。如果你需要我的任何东西来改进这个帖子，请随时告诉我

---

事先非常感谢。

您正在用两种稍微不同的比例绘制线条

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