D3.js平滑的展开路径过渡

Question

我在 JavaScript 中遇到了问题，希望有人能够帮助我。我有一条展开线，它的点一个接一个地显示出来。我想对线条进行动画处理，使其遵循此处所示的动画。到目前为止，我已经开发了它，但现在我的动画与上面超链接中的动画不完全相同。谁能帮我顺利过渡？

var width = 400,
  height = 400,
  margin = {
    top: 25,
    right: 50,
    bottom: 40,
    left: 50
  },
  uid = 0,
  datasetSize = 3;
var padding = 30;
var dataset = [];
for (var i = 0; i < datasetSize; i++) {
  dataset.push(generateDatum());
}
var datasetOld = dataset;
var xScale = d3.scaleLinear()
  .range([0, width])
  .domain([0, d3.max(dataset, function(d) {
    return d[1];
  })])
  .nice();
var yScale = d3.scaleLinear()
  .range([height, 0])
  .domain([0, d3.max(dataset, function(d) {
    return d[2];
  })])
  .nice();
var xAxis = d3.axisBottom()
  .scale(xScale)
  .ticks(10);
var yAxis = d3.axisLeft()
  .scale(yScale)
  .ticks(10);
var svg = d3.select("body").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 + ")");
var svgXaxis = svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + (height) + ")")
  .call(xAxis);
var svgYaxis = svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(" + "0)")
  .call(yAxis);
var line = d3.line()
  .x(function(d) {
    return xScale(d[1]);
  })
  .y(function(d) {
    return yScale(d[2]);
  })
  .curve(d3.curveLinear);
var div = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);
svg.append("path")
  .attr("id", "path1")
  .datum(dataset)
  .attr("class", "line")
  .attr("d", line);
// add new data
var count = 0;
var interval = setInterval(function() {
  datasetOld = dataset;
  var d = generateDatum();
  console.log('Adding new point ' + d);
  dataset.push(d);
  xScale.domain([0, d3.max(dataset, function(d) {
    return d[1];
  })]);
  yScale.domain([0, d3.max(dataset, function(d) {
    return d[2];
  })]);
  svg.selectAll("circle")
    .filter(function(d) {
      return 4 < (count - d[0])
    })
    .style('opacity', 1e-6);
  var dot = svg.selectAll("circle")
    .data(dataset, function(d) {
      return d[0]
    });

  dot.transition()
    .duration(300)
    .attr("cx", function(d) {
      return xScale(d[1]);
    })
    .attr("cy", function(d) {
      return yScale(d[2]);
    });

  dot.enter()
    .append("circle")
    .attr("id", function(d) {
      return d[0];
    })
    .attr("cx", function(d) {
      return xScale(d[1]);
    })
    .attr("cy", function(d) {
      return yScale(d[2]);
    })
    .attr("r", 5)
    .style('opacity', 1e-6)
    .transition()
    .duration(500)
    .style('fill', 'green')
    .style('opacity', 1);
  d3.select('#path1')
    .attr('d', line(datasetOld))
    .transition()
    .attr('d', line(dataset));
  svgXaxis.transition()
    .call(xAxis);
  svgYaxis.transition()
    .call(yAxis);
  count++;
}, 1200);

function generateDatum() {
  return [
    uid++, parseInt(Math.random() * 400), parseInt(Math.random() * 400)
  ];
}

Answer 1

您可以通过创建单个路径来做到这一点

您的代码循环

1. 在阵列上绘制所有路径和圆
2. 更新数据
3. 更新轴并在数组上绘制所有路径和圆

我的代码循环

1. 为路径和圆创建组持有人

2. 更新数据

3. 更新轴并在数组上每 2 个最后数据上画线

自选

如果要更改动画，可以更改.ease('changeThis')当数据在您的scale.range上很高时，您更新Axis，这将导致一个错误，您将看到一些线路未连接

var width = 400,
  height = 400,
  margin = {
    top: 25,
    right: 50,
    bottom: 40,
    left: 50
  },
  uid = 0,
  datasetSize = 3;
var padding = 30;
var dataset = [];
for (var i = 0; i < datasetSize; i++) {
  dataset.push(generateDatum());
}
function generateDatum() {
  return [
    uid++, parseInt(Math.random() * 400), parseInt(Math.random() * 400)
  ];
}
      
      
 var xScale = d3.scaleLinear()
  .range([0, width])
  .domain([0, d3.max(dataset, function(d) {
    return d[1];
  })])
var yScale = d3.scaleLinear()
  .range([height, 0])
  .domain([0, d3.max(dataset, function(d) {
    return d[2];
  })])
var xAxis = d3.axisBottom()
  .scale(xScale)
  .ticks(10);
var yAxis = d3.axisLeft()
  .scale(yScale)
  .ticks(10);
var svg = d3.select("body").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 + ")");
var svgXaxis = svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + (height) + ")")
  .call(xAxis);
var svgYaxis = svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(" + "0)")
  .call(yAxis);
svg.append("g")
  .attr("id", "back")
svg.append("g")
.attr('id',"dott")
function displayLine(data,svg,i) {
      
        
        
  var lineGenerator = d3.line()
    .x(function(d) {
      return xScale(d[1])
    })
    .y(function(d) {
      return yScale(d[2])
    })
      
      
  var line = d3.select('#back').selectAll(null)
    .data(data)
    .enter()
    .append("path")
    .attr('d', lineGenerator(data))
    .attr('fill','none')
    .attr( 'stroke',"red")
    .attr( "stroke-width","3px")
  var totalLength = line.node().getTotalLength();
  line.attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength)
    .transition()
    .duration(500)
    .ease(d3.easeLinear) 
    .attr("stroke-dashoffset", 0)
    .on('end',function(d,i){
    d3.select('#dott')
    .append("circle")
    .attr("id", function() {
      return d[0];
    })
    .attr("cx", function() {
      return xScale(d[1]);
    })
    .attr("cy", function() {
      return yScale(d[2]);
    })
    .attr("r", 5)
    .style('opacity', 1e-6)
     .transition()
    .duration(0)
    .style('fill', 'green')
    .style('opacity', function(){
      if(i==1){return 1}else{return 0}
    });
  })
 }
      
      
 
  setInterval(function() {
    var random = generateDatum()
    var newData =[random]
    newData.unshift(dataset[dataset.length - 1])
    dataset.push(random);
    xScale.domain([0, d3.max(dataset, function(d) {
    return d[1];
  })]);
  yScale.domain([0, d3.max(dataset, function(d) {
    return d[2];
  })]);
  svgXaxis.transition()
    .call(xAxis);
  svgYaxis.transition()
    .call(yAxis); 
    displayLine(newData);
      }, 2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script><script src="https://code.jquery.com/jquery-3.1.0.js"></script><html>
  
  
  
  <body>
    
    
  </body>