代码之家 › 专栏 › 技术社区 › GoT

nvd3/svg未使用新数据更新

nvd3.js d3.js svg jquery javascript

GoT · 技术社区 · 10 年前

我的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;
    });

1 回复 | 直到 10 年前

alaknis 10 年前

您的代码应该可以正常工作。确认您是否真的通过执行以下操作获得了不同的数据

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

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

另外,如果您只是从js文件中复制了这段代码,请注意第一个图表的.datum()中缺少'

推荐文章

Robert · 如何等待csv加载/处理后再继续(NVD3示例lineChart.html)[重复]

7 年前

Cátia Matos · 包含数据[]的饼图不显示任何消息

7 年前

Kenny Nguyen · nvd3烛台图表不显示自定义数据

7 年前

dan2k3k4 · 是否按angular-nvd3指令的范围日期筛选?

9 年前

CharliesHeron · x轴标签未完全显示

9 年前

Shaggie · 如何在迷你图中将显示值格式从浮点数更改为整数?

9 年前

KatoM · nvd3未正确计算最大y值

9 年前

uksz · 一行中的角度UI网格和D3图形

9 年前

Asier Pomposo · X轴上的多条形图标签

9 年前

HankScorpio · ngClick导致D3图表重新绘制

9 年前