在 Leaflet 控件中使用 NVD3 图表

Question

我遵循了 Leaflet 等值线图 tutorial，现在想在右上角的控件中包含一个 NVD3 图表。如果我在地图之外制作额外的 <div> 并包含 <svg> 一切正常。我正在创建这样的信息控件：

var info = L.control();

info.onAdd = function(map) {
  this._div = L.DomUtil.create('div', 'info', ); // create a div with a class "info" 
  this.update();
  return this._div;
};

我用这样的内容填充它：

info.update = function(props) {
  this._div.innerHTML = (props ?
    '<h4>' + props.Name + '</h4>' + props.number :
    'Click on an area');
};

我试图在此处包含相同的 <div> ，当我将它放在地图旁边时可以使用 <div>：

<div><svg/></div>

但是什么也没有出现。这是我的图表：

function exampleData() {
  return [{
      "label": "One",
      "value": 29.765957771107
    },
    {
      "label": "Two",
      "value": 0
    },
    {
      "label": "Three",
      "value": 32.807804682612
    },
    {
      "label": "Four",
      "value": 196.45946739256
    },
    {
      "label": "Five",
      "value": 0.19434030906893
    },
    {
      "label": "Six",
      "value": 98.079782601442
    },
    {
      "label": "Seven",
      "value": 13.925743130903
    },
    {
      "label": "Eight",
      "value": 5.1387322875705
    }
  ];
}

nv.addGraph(function() {
  var chart = nv.models.pieChart()
    .x(function(d) {
      return d.label
    })
    .y(function(d) {
      return d.value
    })
    .showLabels(true);

  d3.select("#chart svg")
    .datum(exampleData())
    .transition().duration(350)
    .call(chart);

  return chart;
});

我认为它与 L.DomUtil.create 有关，因为这里创建了控制面板的 <div>。但我没能告诉 NVD3 在控制面板中渲染绘图。你有什么想法吗？
一件奇怪的事情也发生了：
我在控制面板中看到文本下方的空白区域（应该呈现图形的地方）。如果我点击我的功能，文本会按预期更改，但下面的空白字段也会随着每次点击而增加。如果我在 info.update.

中包含包含 <svg/> 的 <div>，就会发生这种情况

Answer 1

问题听起来并不复杂。阅读我的解决方案后，您可能会大笑。

当您在 select 呈现图表的元素的行中创建饼图 nv.addGraph(function() {..} 时 d3.select("#chart svg") 浏览器假设 DOM元素存在，事实并非如此

你假设它必须与 L.DomUtil.create 做某事是正确的。这是您调用 this.update(); 实际呈现 NVD3 饼图所需的 <div id="chart"> <svg/></div> 的点。

这就是我对您的代码所做的。

function createPieChart() {
  nv.addGraph(function() {
    var chart = nv.models.pieChart()
    ...  
    ...
    return chart;
  });
}

将其包装在 createPieChart() 函数中，以便在必填。

在您的 info.update() 内部，我将在创建 innerHTML 后调用 createPieChart() 函数。

// method that we will use to update the control based on feature properties passed
info.update = function(props) {
  this._div.innerHTML = (...); //WHICH DIV HAS TO BE GENERATED

  // Now we can create the Pie Chart  
  createPieChart();
};

现在它按预期工作了。

你可以找到一个有效的 version here

希望对您有所帮助

在 Leaflet 控件中使用 NVD3 图表

Using NVD3 chart in Leaflet control

html

javascript

charts

leaflet

nvd3.js