Question

我基本上跟着this example构建了堆积条形图。但是，我想通过下拉菜单更新数据。

我的逻辑是这样的：我在15个对象的JSON数组中有数据。我在Javascript中使用一个数组来存储这些对象中的每一个，当我从下拉菜单中选择一个索引时，我想加载所选对象的D3可视化。

目前，我的叠加条形图有效，我在更改索引时正确更新/设置了轴的动画，但是我无法显示图形。出于某种原因，我必须按两次更新按钮才能显示图表，即使第一次点击时显示轴。

我的代码是这样的：

d3.json致电

...

功能更新（索引）{

...

var layers = svg.selectAll(".layer")

layers.selectAll("rect")
  .data(new_layers)
  .exit()
  .transition()
    .duration(300)
  .attr("y", function(d) { return -1 * y(d.y + d.y0); })
  .remove();

layers
  .transition()
    .duration(300)
  .remove()

var new_layer = svg.selectAll(".layer")
  .data(new_layers)
.enter().append("g")
  .attr("class", "layer")
  .style("fill", function(d, i) { 
    return color(i); 
  });

new_layer.selectAll("rect")
  .data(function(d) { return d; })
.enter().append("rect")
  .attr("x", function(d) { return x(d.x); })
  .attr("y", function(d) { return y(d.y + d.y0); })
  .attr("height", function(d) { return y(d.y0) - y(d.y + d.y0); })
  .attr("width", x.rangeBand() - 1)
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide);

我有一种感觉，因为我创建了new_layer变量，也许在我第一次调用update时没有完全初始化，所以我需要再次按下它？不完全确定，所以任何指导都将非常感谢。

我的代码结构基本上遵循第一句中链接的示例，但d3示例没有转换。

Answer 1

请遵循标准更新模式：https://bl.ocks.org/mbostock/3808218

在您的情况下，如果您只想删除旧图层并重绘它们：

reader.nextLine();

此外，转换是异步执行的，因此即使您的后续代码在转换后按顺序执行，当您到达以后的代码时，状态也可能没有被转换更新。

一般更新模式，供您参考：

svg.selectAll(".layer").remove();

var new_layer = svg.selectAll(".layer")
  .data(new_layers)
  .enter().append("g")
  .attr("class", "layer")
  .style("fill", function(d, i) { 
    return color(i); 
  });

new_layer.selectAll("rect")
  .data(function(d) { return d; })
  .enter().append("rect")
  .attr("x", function(d) { return x(d.x); })
  .attr("y", function(d) { return y(d.y + d.y0); })
  .attr("height", function(d) { return y(d.y0) - y(d.y + d.y0); })
  .attr("width", x.rangeBand() - 1)
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide);

D3.js更新堆积条形图

1 个答案: