Question

我希望使用流畅的动画加载D3图表的条形图。为此，我正在使用D3过渡。虽然这种方法通常适用于网页中的图形，但在单张传单地图中点击时会调用弹出窗口;我没有得到预期的结果。酒吧只是加载。如果我为延迟设置了一个非常高的值，第一个条显示加载，其他加载非常慢。这告诉我动画已经开始加载。我无法使用弹出窗口中的动画加载图表。

这就是我想要实现的目标，例如：http://jsfiddle.net/pg77k/10/

这是我到目前为止所做的：http://jsfiddle.net/Monduiz/rhn11gpk/

我的图表中的代码，我在其中绘制了过渡条：

bar.append("rect")
    .attr("width", 0)
    .attr("height", barHeight - 1)
    .attr("fill", "#9D489A")
    .transition()
    .delay(function (d,i){ return i * 40;})
    .duration(350)
    .attr("width", function(d){return x(d.value);});

Answer 1

将transition移至popupopen回调中。

保存rects：

var rects = bar.append("rect")
  .attr("width", 0)
  .attr("height", barHeight - 1)
  .attr("fill", "#9D489A");

随后：

map.on('popupopen', function(e) {
    rects.transition()
      .delay(function (d,i){ return i * 40;})
      .duration(350)
      .attr("width", function(d){return x(d.value);});
});

更新了fiddle。

弹出式窗口

1 个答案: