D3.js使用新数据更新样条曲线 [英] D3.js updating spline with new data

问题描述

我正在尝试使用新数据更新样条，但是使用D3.js库遇到了问题.

这是我的小提琴: http://jsfiddle.net/2N2rt/22/

当用户单击按钮时，目标是使每个样条曲线根据新数据进行动画处理.我觉得我真的很接近.我已经阅读了用联接思考"一文，并用它来提出上面的小提琴.

解决方案

在您的小提琴中，您在更改数据时将 d 属性应用于错误的元素.在 enter 组中，添加一个新组(类人)，然后向该组中添加一个line元素.这样，当数据更改时，您需要更新组中的行，而不是组本身.要修复它，请使用

people.selectAll(".line").transition()

代替

people.transition()

I'm trying to update a spline with new data, but I'm running into a problem using D3.js library.

Here is my fiddle: http://jsfiddle.net/2N2rt/22/

When a user clicks the button, the goal is to have each spline animate according to the new data. I feel like I'm really close. I have read the article 'Thinking with Joins' and used it to come up with the fiddle above.

解决方案

In your fiddle, you're applying the d attribute to the wrong element when changing the data. In the enter group, you add a new group (class people), then add a line element to the group. As such, when the data changes, you need to update the line within the group, not the group itself. To fix it, use

people.selectAll(".line").transition()

instead of

people.transition()

这篇关于D3.js使用新数据更新样条曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！