弹出窗口内条形图上的 D3 过渡

Question

我希望使用流畅的动画加载 D3 图表的条形图。为此，我正在使用 D3 转换。虽然此方法通常适用于网页中的图形，但在单击 Leaflet 地图时调用的弹出窗口中；我没有得到想要的结果。酒吧刚刚加载。如果我为延迟设置了一个非常高的值，第一个栏会显示加载，而其他栏加载非常缓慢。这告诉我动画已经开始加载。我无法使用弹出窗口中的动画加载图表。

这就是我要实现的，例子：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

在 popupopen 回调中将您的 transition 移至运行。

保存矩形：

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。

弹出窗口内条形图上的 D3 过渡

D3 transition on bars inside a popup

javascript

d3.js

leaflet