Question

我的html正文中添加了两个svg div

<div id="tag1"><svg></svg></div>
<div id="tag2"><svg></svg></div>
<body>

在每个表单提交上，我调用以下代码来创建一个nvd3图表。但是，我看到第一个调用有效，但是，对于后续的表单提交调用，图形不会改变（在每个表单提交时，url是不同的，因此数据是不同的。我已经验证了addGraph函数的数据参数是正确填充。但是，即使addGraph函数的数据不同，也不会重新填充svg内容。

newChart = d3.json(url, function(error, data) {
    nv.addGraph(function() {
        var chart = nv.models.discreteBarChart()
          .staggerLabels(true)
          .tooltips(true)
          .showValues(false)
          .showXAxis(false)
          .color(['#1f77b4'])

        d3.select('#tag1 svg')
          .datum(data['x])
          .transition().duration(500)
          .call(chart)
          ;

        nv.utils.windowResize(chart.update);

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

        d3.select("#tag2 svg")
          .datum(data['y'])
          .transition().duration(1200)
          .call(chart);

        nv.utils.windowResize(chart.update);

      return chart;
    });

Answer 1

您的代码应该可以正常运行。通过执行类似

的操作，确认您是否确实获得了不同的数据

d3.json(url, function(error, data) {
    console.log(data);
}

每次提交表单时，请检查您获得的内容是否有所不同。

如果您只是从js文件中复制此代码，请注意您的第一个图表的.datum（）缺少'

nvd3 / svg没有获得新数据的更新

1 个答案: