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中最后一个示例的代码。我和你的代码之间唯一的区别是轴更新\转换发生在之前迈克的路径转换。

所以我在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);

它似乎工作正常。而不是“老”＆＃39; x轴在opacity: 0.000001的DOM中徘徊，它们被删除。令人沮丧的是，我无法理解为什么现在这样有效！

Answer 2

在最后一次异步回调期间调用结束事件（tick）在转换持续时间和延迟到期之后，在所有补间之后用t = 1调用。 请注意，如果转换被a取代对于给定元素的后续调度转换，将不会发生结束事件派遣该元素;中断的转换不会触发结束事件。例如，transition.remove会调度每个元素转换结束时删除，但如果转换结束中断，元素不会被删除。

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

为什么不删除轴刻度线？

2 个答案: