Question

第1部分 - 修正了下面的更新。第2部分仍然需要一个解决方案。

我有一个问题是让d3版本3以我希望它为嵌套列表的方式使用enter，update，append，exit。我想要这样的HTML结构：

<ul id="list">
  <li> 1
    <ul>
      <li>Shawn Allen</li>
      <li>Mister</li>
      <li>Mike Bostock</li>
    </ul>
  </li>
  <li> 2
    <ul>
      <li>Shawn Allen2</li>
      <li>Mister2</li>
      <li>Mike Bostock2</li>
    </ul>
  </li>
</ul>

我希望数据具有与此类似的结构：

var innerlistdata = [
  {key: "h1", data: [0, 1, 2, 3, 4, 5]},
  {key: "h2", data: [6, 7, 8, 9, 10, 11]}
];

当从数据数组中删除项目时，我希望exit函数能够动画删除项目，例如：

setTimeout(function() {
  innerlistdata[1].data.pop();
  innerlistdata[1].data.pop();
  innerlistdata[1].data.pop();
  innerlistdata[1].data.pop();
  update(innerlistdata);
}, 6000);

此外，当删除父项时，我希望退出函数再次删除动画的完整子部分，例如：

setTimeout(function() {
  innerlistdata.pop();
  update(innerlistdata);
}, 12000);

我已经在线阅读了大量文章和类似的stackoverflow问题，包括：https://bost.ocks.org/mike/nest/和mbostock的评论：https://groups.google.com/forum/#!topic/d3-js/5AxgsKK31EA但是无法让它以我想要的方式运行。

我认为我接近我需要的解决方案，但我觉得我已经错过了一些细微差别，这就是我在这里问的原因。

我已经创建了示例，并在以下代码集中显示了问题：https://codepen.io/misterfitzy/pen/JMYojw

即使是孩子＆＃34;键＆＃34;函数具有预期的行为，即

var child = parent
    .selectAll("li")
      .attr('class', 'update')
      .data(function(d, i) { return d.data; }, function(d, i) {return d;});

导致数据数组中的项目被输入＆＃34;和初始文本＆＃34;退出＆＃34;适当。当从数据数组中删除子项时，退出函数会优雅地淡出项目。

除了父函数的退出函数的转换之外，一切都正常工作。这些项目立即消失而不是动画。这告诉我父输出功能但动画没有。有什么想法吗？

更新：第1部分中的解决方案是使用＆＃39; color＆＃39;作为过渡属性是一个坏主意，因为它不会设置子元素的样式。使用不透明度会产生所需的效果：

  parent.exit()
    .transition()
    .attr("class", "exit")
    .duration(5000)
    .style("opacity", 0)
    .remove();

第2部分：

我还尝试了一个解决方案，其中初始列表为空，并且完全基于数据创建嵌套列表。最初的清单：

<ul id="list2">
</ul>

初始数据：

var innerlistdata = [
  {key: "h1", data: [0, 1, 2, 3, 4, 5]},
  {key: "h2", data: [6, 7, 8, 9, 10, 11]}
];

此示例的Codepen：

https://codepen.io/misterfitzy/pen/xpVRWx

这次正确创建了项目并且输入了＃34;适当。但是，我无法弄清楚如何让孩子退出功能完全解雇。我怀疑这与我的选择有关，但我不知所措。

在我的例子中，我尝试了一个自定义键功能，它有点hacky但应该足够好，可以识别子项而不使用0,1,2,3 ......等。

function(d, i) {return "key" + d + "" + i;}

这只是根据2d数组中的值和索引创建键。几乎保证是唯一的而不是简单的索引。非常糟糕，但对于这个例子应该足够好。

但是，当弹出项目时，子退出功能不会触发。当父退出函数触发时，它将删除所有显示我的键函数很可能已损坏的子元素。

当我第一次加载页面时打印键值时，我得到以下键：

// Parents
{key: "h1", data: Array(6)}
{key: "h2", data: Array(6)}

// Children
child: key00
child: key11
child: key22
child: key33
child: key44
child: key55
child: key60
child: key71
child: key82
child: key93
child: key104
child: key115

当我弹出项目时，如示例1所示，我从父级获得以下键：

{key: "h1", data: Array(6)}
0
1
2
3
4
5
{key: "h2", data: Array(2)}
6
7
8
9
10
11
{key: "h1", data: Array(6)}

孩子们没有钥匙。这清楚地表明我搞砸了数据绑定，但我不知道为什么或如何。

那么对你们所有人来说，你们是否会介意看看我的例子并向我推进正确的方向？我把头发拉过这个！

谢谢！

使用嵌套列表

0 个答案: