Question

我想在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操作？

Answer 1

我最终了解了什么地方出了问题。合并enter和update选择后，在我的代码中，我调用transition将节点移动到适当的位置。过渡不会返回selection，而是它自己的对象transition，它与selection的接口非常相似，但是缺少append和data以及其他一些方法。因此解决方案只是将过渡方法包装在调用方法中，因此我仍然可以对选择进行操作，现在我可以像往常一样使用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})`));

D3.js在更新阶段修改DOM

1 个答案: