Question

我是d3的新手，但我的下一个项目将在很大程度上取决于交互式图表。我阅读了介绍并理解了数据绑定的概念，输入了元素，然后按general update pattern中的说明退出和删除。但是，我不确定是否可以只更新现有svg图的一些元素（之前使用d3生成），而无需重新渲染整个svg。我们假设我要转换<g>组或更新＆＃34; x＆＃34; rect元素的坐标。

我的目标是编写一个自定义的时间轴插件。 I started from this one。此插件不考虑更新数据。让我们说我想要一个指示特定时间的垂直条，我想动态更新条形图的位置。 Q1：我是否必须从头开始绘制整个svg？在我的理想世界中，我在时间轴函数上有一个接受时间字符串的方法updateCursor()。 Q2：可以实现吗？你知道有没有关于这个问题的教程？

在我发现的示例中，更新需要重新绘制整个svg。例如： http://www.d3noob.org/2013/02/update-d3js-data-dynamically-button.html

非常感谢您的回答！

最佳，甲

Answer 1

Q1：我是否必须从头开始绘制整个svg？在我理想的世界里我在接受的时间轴函数上有一个方法updateCursor（）时间字符串。

绝对否，不需要来绘制整个内容。您可以更新svg中的任何一个，只需dom个元素，然后可以选择移动，转换，样式等...

Q2：可以实现吗？是否有任何教程处理此问题你知道吗？

大量的教程，实际上是一般的更新模式，你上面的链接就是这样一个例子。关键在于以下几点：

// you've selected a bunch of text elements that already exist on the page
var text = svg.selectAll("text")
  .data(data); //<-- you've now bound data to them

// text here is the elements already on the page, we just update them
text.attr("class", "update");

// if there's more data then previous existing elements
// these are returned by .enter()
text.enter().append("text")

// now you are operating on both existing and new elements
text.text(function(d) { return d; });

[另外，d3 noob示例，不会重绘整个图表，它只是重新绘制线条，在所有更新的内容之后

但是，你的情况听起来更容易，因为听起来你正在处理一个你想要重新定位的元素（在这种情况下你不需要数据绑定）。最初你会做：

var myCoolRect = svg.append('rect')
  .attr('id', 'myCoolRect')
  .attr('x', 100)
  ....;

现在您可以保留对它的引用，然后使用以下命令更新它：

myCoolRect.attr('x', 250);

或者您可以稍后通过我提供的唯一id重新选择它：

svg.select('#myCoolRect')
  .attr('x', 100);

更新d3 svg图表中的元素

1 个答案: