Javascript D3.js在更新阶段修改DOM

我想做一些类似于D3.js中可折叠列表的事情。假设我们有一个格式为

data=[{“title”：“lorem”，“items”：[“lorem”，“ipsum”，“…”]，“state”：“collapsed”}]

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

标题
项目1
项目2
标题2

---

我的问题是，当用户单击列表项时，它应该适当地折叠/展开，但基础数据没有更改，因此我不在输入选择中，并且我无法使用“附加”为项目生成标记。我该怎么解决呢？或者，如果更改没有直接映射到数据，我应该使用JQuery来执行DOM操作？

我最终明白了问题所在。在合并enter和update选项后的代码中，我调用transition将节点移动到适当的位置。Transition不会返回

选择

，但它是自己的对象

Transition

，它与

选择

具有非常相似的接口，但缺少

附加

和

数据

和其他方法。所以解决方案就是在call方法中包装转换，所以我仍然对选择进行操作，现在我可以像往常一样使用

apppend

和

data

因此，我的代码如下所示：

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})`));

---

您使用的是哪个版本的D3js？v5.9.2（最新版本）