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

Question

我对 d3.js 完全陌生，目前正在处理 d3.js 中的多折线图，因此准备了两个不同的数据集（“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/

我会感谢任何帮助。我不经常发布问题，并试图将我上次经验中的建议结合起来。如果您需要我的任何东西来改进这篇文章，请随时告诉我。

非常感谢。

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/