为什么不删除轴刻度线？

Question

我最近开始接触 d3 和绘图。

现在我已经构建了一个非常简单的图表，应该用新数据制作动画。但是，如果我对轴进行动画更改，则动画有效，所有刻度线都保留在 svg 内。它们的不透明度下降到非常低但从未达到 0。很长一段时间后运行我的 svg 包含了曾经创建的每个刻度线。

我已经将我的代码分离到一个 plunker 中（见下面的代码）

////////////////////////// LINE ////////////////////////////////////////////////////////////////////////////
function createLine() {
  var random = d3.random.normal(0, 20),
    data = d3.range(22).map(random),
    svg = d3.select('#line').append('svg')
      .attr('width', 1000)
      .attr('height', 500);

  var scaleX = d3.scale.linear()
    .domain([0, 20])
    .range([0, 800]);

  var axisX = d3.svg.axis()
    .scale(scaleX).orient('bottom')
    .ticks(5);

  var scaleY = d3.scale.linear()
    .domain([-40, 40])
    .range([0, 400])
    .nice();

  var axisY = d3.svg.axis()
    .scale(scaleY).orient('right')
    .ticks(5);

  var increment = 0;

  var line = d3.svg.line()
    .interpolate('basis')
    .x(function(d, i) {
      return scaleX(i + increment);
    })
    .y(function(d, i) {
      return scaleY(d);
    });

  var area = d3.svg.area()
    .interpolate("basis")
    .x(function(d, i) {
      return scaleX(i + increment);
    })
    .y0(400)
    .y1(function(d, i) {
      return scaleY(d);
    });


  svg.append('defs').append('clipPath')
    .attr('id', 'clip')
    .append('rect')
    .attr('width', 800)
    .attr('height', 400);

  var path = svg.append('g')
    .attr('transform', 'translate(10, 50)')
    .attr("clip-path", "url(#clip)")
    .append('path').datum(data).attr('d', line);

  var xAxis = svg.append('g').attr('class', 'axis-x')
    .attr('transform', 'translate(10,250)').call(axisX);
  var yAxis = svg.append('g').attr('class', 'axis-y')
    .attr('transform', 'translate(820,50)').call(axisY);

  function tick() {
    data.push(random());

    path.attr('d', line)
      .attr('transform', null)
      .transition().duration(500).ease('linear')
      .attr('transform', 'translate(' + scaleX(increment - 1) + ')')
      .each('end', tick);

    ++increment;
    scaleX.domain([increment, increment + 20]);

    xAxis.transition().duration(500).ease('linear')
      .call(axisX);


    data.shift();
  }

  tick();
}
////////////////////////// LINE ////////////////////////////////////////////////////////////////////////////

http://plnkr.co/k4B1OxFBPwD3z9ARVrjg

Answer 1

这似乎可以解决问题：http://plnkr.co/KgdBVTmac1QLAxjgACDD

我最终查看了用于生成 Mike Bostock's 'Path Transitions' tutorial 中最终示例的代码。我能看到的与您的代码之间的唯一区别是轴 update\transition 发生在之前 Mike 的路径转换。

所以我在 function tick() 中对您的代码重新排序以放置：

path.attr('d', line)
    .attr('transform', null)
    .transition().duration(500).ease('linear')
    .attr('transform', 'translate(' + scaleX(increment - 1) + ')')
    .each('end', tick);

在功能块的末尾，之后：

xAxis.transition().duration(1000).ease('linear')
    .call(axisX);

它似乎工作正常。而不是 'old' x 轴刻度在 DOM 和 opacity: 0.000001 中徘徊，它们被删除了。令人沮丧的是，我现在不明白为什么这会起作用！

Answer 2

The end event is invoked during the last asynchronous callback (tick) after the transition duration and delay expires, after all tweens are invoked with t=1. Note that if the transition is superseded by a later-scheduled transition on a given element, no end event will be dispatched for that element; interrupted transitions do not trigger end events. For example, transition.remove schedules each element to be removed when the transition ends, but if the transition is interrupted, the element will not be removed.

https://github.com/mbostock/d3/wiki/Transitions#each

为什么不删除轴刻度线？

Why dont the axis tick marks get removed?

javascript

d3.js