d3.js 平滑展开路径过渡

Question

我的 JavaScript 有问题，希望有人能帮助我。 我有一条展开线，它的点一个接一个地显示出来。我想为这条线设置动画，使其遵循here 中的动画。 到目前为止，我已经开发了它，但现在我的动画与上面超链接中的动画不完全一样。谁能帮我顺利过渡？

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>