d3.js图表未使用新数据更新

Nyxynyx

d3.js通过获取100个对象的数组来绘制一系列矩形尽管console.log(data)显示正在检索新数据,但新数据点似乎未附加任何矩形。

.enter().append()不正确地使用?

function init() {
    var width = 800,
        height = 400,
        margin = 50;

    chart = d3.select('#chart')
                .append('svg:svg')
                .attr('width', width)
                .attr('height', height);
}

function do_update() {
    data = fetch_latest_top100();
    console.log(data)

    chart.selectAll('rect')
        .data(data)
        .enter()
        .append('svg:rect')
        .attr('x', function(d) { return x(d.x); })
        .attr('y', function(d) { return y(d.y); })
        .attr('height', function(d) { return d.value; })
        .attr('width', function(d) { return 3 });
}

jsfiddlehttp : //jsfiddle.net/BU8cA/

阿米莉亚

您的update方法的问题在于它仅处理新元素,并且不更新现有元素以匹配其新数据。使用enter()选择创建新矩形后,必须返回到完整选择(新矩形和不断变化的矩形)以设置将要更改的属性。

最简单的方法是将选择内容存储在变量中,该变量已在您应用数据功能的那一点,但在调用enter方法之前,如下所示:

   var rects = chart.selectAll('rect')
        .data(data);

   rects.enter()
        .append('svg:rect')
        .attr('width', function(d) { return 3 }); 
       // since the width is constant, you only need to set it once

   rects.exit().remove(); //if the number of data points might shrink

   rects.attr('x', function(d) { return x(d.x); })
        .attr('y', function(d) { return y(d.y); })
        .attr('height', function(d) { return d.value; });
   //note that this now includes the rectangles created with enter()
   //as well as the old ones you are resizing / repositioning

那应该获得正确的数据,但是您仍然存在布局问题(无论如何,摆在小提琴上),因为您的y值设置不正确。y值是矩形顶部的位置,因此,如果您希望看起来像所有的条都位于同一行上,则需要根据条的高度对其进行调整。Mike Bostock的教程和演示在这里:http : //bost.ocks.org/mike/bar/3/


D3版本4+的更新

附加到“输入”选择中的元素不再自动添加到主(更新)选择中。现在,您需要通过merge在“输入”选择上调用方法来显式创建“合并”选择:

var rects = chart.selectAll('rect')
    .data(data);

rects.exit().remove(); //if the number of data points might shrink

rects.enter()
    .append('svg:rect')
    .attr('width', function(d) { return 3 }) // since the width is constant, you only need to set it once

  .merge(rects) 
          //merge the newly added elements into the main selection
          //of existing elements to update
    .attr('x', function(d) { return x(d.x); })
    .attr('y', function(d) { return y(d.y); })
    .attr('height', function(d) { return d.value; });

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用新数据更新图表时,d3 条形图标签未更新

来自分类Dev

d3图表未正确更新

来自分类Dev

d3折线图和面积图未使用新数据数组更新

来自分类Dev

D3图表缺少数据

来自分类Dev

如何使用onchange滑块事件更新d3图表中的数据?

来自分类Dev

如何使用onchange滑块事件更新d3图表中的数据?

来自分类Dev

d3图形大小未更新

来自分类Dev

d3图形大小未更新

来自分类Dev

用新数据更新/修改d3词云

来自分类Dev

d3 更新了 json 加载但不访问新数据

来自分类Dev

如何更新d3图的数据?

来自分类Dev

在较旧的图表上方添加新的D3图表

来自分类Dev

D3图表-组合多个图表

来自分类Dev

D3.js - 如何使用内联 JSON 作为 D3 图表的数据集,而不是 csv/tsv/json 文件

来自分类Dev

根据更新的数据调整矩形大小(d3,js)

来自分类Dev

D3.js 如何在有新数据时更新图表

来自分类Dev

D3使用数组中的数据

来自分类Dev

使用可变长度的新数据更新d3条形图标签

来自分类Dev

D3多系列图表

来自分类Dev

图表中的D3工具提示

来自分类Dev

更改图表d3的颜色

来自分类Dev

多线顺序d3图表

来自分类Dev

悬停效果不错(D3图表)

来自分类Dev

如何正确缩放d3图表?

来自分类Dev

在React / Redux中更新D3图表

来自分类Dev

D3 - 点击更新和清除图表

来自分类Dev

转换d3图表以从变量内的json加载数据

来自分类Dev

d3js 图表点和区域未更新

来自分类Dev

使用d3 js在phant中绘制json数据