在Leaflet控件中使用NVD3.js饼图

Question

我正在尝试向我正在处理的网络地图添加一些数据可视化，我正在探索使用D3，特别是NVD3。我使用PieChart Example作为测试运行来进行概念验证。
我像这样在我的地图上添加了一个传单控件（原谅了错误的格式化）：

var visualizationControl = L.control({ position: 'bottomleft' });
var visualizationDiv = L.DomUtil.get("visualizationContainerDiv");

// ...
visualizationControl.onAdd = function (map) {
  this._div = L.DomUtil.create('div', 'control');
  this._div.innerHTML = result;
  return this._div;
}

visualizationControl.addTo(MapProvider.map);
nv.addGraph(function () {
  var chart = nv.models.pieChart()
    .x(function (d) { return d.label })
    .y(function (d) { return d.value })
    .showLabels(false);

  d3.select("#chart svg") //div with chart Id and svg container within that div
    .datum(exampleData())
    .transition().duration(350)
    .call(chart);

  return chart;
});

图表将在我的控件中呈现正常，并且悬停行为确实正确注册。

但是，当它将工具提示附加到DOM时，它会将其附加到正文而不是我的SVG甚至是控制div。

很难从这张图片中看出来，但是这是在on.hover上的馅饼切片之间拍摄的，它应该在馅饼切片的顶部写出工具提示。注意“ One 29.77”坐在导航栏的一侧。

我一直在探索NVD3 js的开发版本，并发现了一些引用工具提示容器的块，它看起来应该将它附加到SVG容器。

我也试过改变工具提示的css无济于事。 我还不想放弃这个。任何建议，帮助，想法将不胜感激。感谢。

使用当前版本的传单，D3和NVD3，在Chrome中进行调试/测试。

更新 我没有使用NVD3解决这个问题，但最终使用C3js。它还有一个饼图，这与我的L.control（）很好地配合。但需要注意的是（如果您尝试使用C3）请仔细查看图表如何接收传递给他们的数据。我不得不玩这个让他们继续工作。