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

我正在尝试将一些数据可视化添加到我正在处理的Web地图中,我正在探索使用D3,特别是NVD3.我正在使用PieChart示例作为概念验证的测试运行.
我像这样在我的地图上添加一个传单控件(原谅错误的格式化):

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),请仔细查看图表如何接收传递给他们的数据.我不得不玩这个让他们继续工作.