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在控制面板中渲染绘图。你有什么想法吗？
一件奇怪的事情也发生了：
我在控制面板中的文本下方看到并清空了区域（应该渲染图形）。如果我点击我的功能，文本会按预期更改，但下面的空白字段会随着每次点击而增加。如果我在<div>中添加<svg/>包含info.update，就会发生这种情况。

Answer 1

这个问题听起来并不复杂。一旦你阅读我的解决方案，你可能会笑。

在您选择要呈现图表nv.addGraph(function() {..} 的元素的行中创建pieChart d3.select("#chart svg")时，浏览器假设DOM元素存在，这是不是这样的。

你认为它必须与L.DomUtil.create做某事是对的。您可以调用this.update();来实际呈现NVD3 pieChart所需的<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图表

1 个答案: