Question

我正在使用d3 "Calendar View" example，希望一次显示1年，并显示一些按钮来显示或回归显示的年份。在此示例中，所有数据（1990 - 2010年）都以d3.csv调用到达，并在由...定义的图表中呈现。

var svg = d3.select("body")
  .selectAll("svg")
  .data(d3.range(1990, 2011))
  .enter().append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");

我希望能够更新d3类的data属性，并通过可点击的事件更新图表。

例如，可能会显示2010年的默认值是这样的......

var svg = d3.select("body")
  .selectAll("svg")
  .data(d3.range(2010, 2011))
  .enter().append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");

我只想在事件上将数据元素修改为d3.range(2009, 2010)并重绘图表。

我尝试删除并重新渲染图表，但没有成功。必须有一种更简单的方法来做到这一点。

Answer 1

在上面的代码中，您只需要调用enter，它旨在将新元素添加到DOM中。作者Mike Bostock给出了一篇非常好的文章，叫做3 Little Circles，它解释了进入/退出/更新模式是如何工作的（注意它虽然适用于v3）。

const join = d3
    .select("body")
    .selectAll("svg")
    .data(d3.range(2010, 2011), d => d);

首先要注意的是，我们为key提供了.data()功能。在这种情况下，密钥的字面值为d，它将为两个数据点返回2010和2011。

join.exit().remove();

摆脱旧日历！

join.enter()
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")")
    .merge(join)
    ... do more stuff

您缺少的下一个导入位是更新现有内容。您可以通过enter选择并致电merge(join)来实现这一目标。这会为您提供所有新和更新项目，以便您可以开始更改属性/样式或进行进一步的嵌套连接。

绘制图表后更新d3数据元素

1 个答案: