d3.js : create an expanding list viz using selection. 上

Question

我有一个类似的数据结构

[
    {"name":"foo", "links":["a", "b", "c"]}, 
    {"name":"bar", "links":["d", "e", "f"]}
]

我想列一个类似的列表

<ul>
    <li> foo </li>
    <li> bar </li>
</ul>

当我点击 foo 时，它会像

一样展开

<ul>
    <li> foo 
        <ul>
            <li> a </li>
            <li> b </li>
            <li> c </li>
        </ul>
    </li>
    <li> bar </li>
</ul>

我想使用 d3.js 来做这件事。上榜既简单又有趣:

toplist = d3.select("body").append("ul");
toplist.selectAll("li")
    .data(data)
    .enter()
    .append("li")
        .text(function(d){return d.name;})

添加子列表更容易:

items = toplist.append("ul")
    .selectAll("li")
    .data(function(d){return d.links})
    .enter()
    .append("li")
         .text(function(d){return d})

我可以给toplist中的每个li添加一个on("click"..，比如

toplist.selectAll("li")
    .data(data)
    .enter()
    .append("li")
        .text(function(d){return d.name;})
        .on("click", expand)

并将子列表代码移动到一个名为 expand 的函数中。好像

function expand(d,i){

然后里面有上面的items = ...代码。

问题在于这会同时扩展 foo 和 bar。

如何给 foo 列表元素一个单独的点击事件给 bar ，它只扩展该元素？本质上，我需要传递 expand 数据元素的索引，并让它只对 DOM 的特定部分进行操作。

任何帮助将不胜感激!

Answer 1

当 expand 被调用时，你就拥有了你所需要的一切。 this 上下文是被点击的 li 元素，而 d 是关联的数据。如果您只想展开(而不是在展开和折叠之间切换)，则可以通过选择以下方式创建子列表:

function expand(d) {
  d3.select(this)
      .on("click", null)
    .append("ul")
    .selectAll("li")
      .data(d.links)
    .enter().append("li")
      .text(function(d) { return d; });
}

请注意，expand 也会从被点击的项目中移除点击处理程序；您不想在单击两次时再次添加列表。

如果您想在展开和删除之间切换，那么您需要跟踪一些状态:子菜单是打开还是关闭。您可以通过在 d 上存储一个 bool 值(例如，d.open)来做到这一点，或者您可以通过查询 DOM 来查看子菜单是否已经存在来做到这一点: d3.select(this).select("ul").empty().

另一种方法是提前创建所有子菜单，然后通过 display 样式属性切换可见性。如果您拥有所有可用数据，这是最简单的选择；如果您异步加载链接数据，我可能只会打扰动态创建子菜单。

实时示例:http://bl.ocks.org/1541816