时间戳

首页 > 解决方案 > D3.js 在更新阶段修改 DOM

javascript - D3.js 在更新阶段修改 DOM

问题描述

我想在 D3.js 中做一些类似可折叠列表的事情。假设我们有一个格式的数据data = [{"title": "lorem", "items": ["lorem", "ipsum", "..."], "state": "collapsed"}]

现在，我想在状态未“折叠”时将此数据呈现为一组 svg 文本标签，否则仅呈现一个带有标题的文本标签。

<g class="item">
<text>Title</text>
<text>Item 1</text>
<text>Item 2</text>
</g>
<g class="item collapsed">
<text> Title2</text>
</g>

我的问题是，当用户单击列表项时，它应该适当地折叠/展开，但基础数据没有改变，所以我没有进入选择，我不能使用 append 为项目生成标签。我该如何解决？或者，如果更改没有直接映射到数据，我应该使用 JQuery 来执行 DOM 操作？

标签： javascriptd3.js

解决方案

我终于明白出了什么问题。在合并输入和更新选择后的代码中，我调用转换以将节点移动到适当的位置。转换不会返回selection，但它是自己的对象transition，具有非常相似的接口，但selection缺少其他方法。所以解决方案只是在调用方法中包含转换，所以我仍然对选择进行操作，现在我可以像往常一样使用和。appenddataapppenddata

所以我的代码看起来像这样：

const nodeUpdate = node // nodeUpdate is now a transition object!!!
    .merge(nodeEnter)
    .transition(transition)
    .attr('transform', d => `translate(${d.x},${d.y})`);

现在是：

const nodeUpdate = node // nodeUpdate is a selection
    .merge(nodeEnter)
    .call(s => s.transition(transition).attr('transform', d => `translate(${d.x},${d.y})`));

推荐阅读