D3.js 出口工作不正常

你好，我是D3的新手，退出功能有问题

我想在不使用SVG的情况下制作一些列表和条形图，一切都很有魅力

我选择div，然后追加并输入数据以填充variuos div

var content = d3.select("#graph").selectAll("div")
        .data(bandMates)
        .enter()
        .append("div")
        .classed("member",true) //Div contenedor

        content
            .append("div")
            .text(function(d) { return d.name; });

        content
            .append("div")
            .style("height", "40px")
            .style("width", "0px")
            .style("background-color", "#ff9999")
            .transition()
            .duration(1000)
            .style("width", function (d){ return d.songs + "px";});

        content
            .append("div")
            .text(function(d) { return "wrote " + d.songs + " songs!"; });

在流程结束时，我包括content.exit.remove；函数，因为我希望能够使用另一个函数更新歌曲的数量，然后再次调用de draw函数

Firebug控制台向我抛出此错误

content.exit is not a function

我错过什么了吗？ 我看了博斯托克的教程，一切似乎都很好

我已经做了一个JSFIDLE来检查我的代码：

---

谢谢你的阅读

您已将内容定义为：

var content = d3.select("#graph").selectAll("div")
    .data(bandMates)
    .enter()
    .append("div")
    .classed("member",true) //Div contenedor

因此，当您执行content.exit时，就像尝试执行d3.selectgraph.selectAlldiv.databandMates.enter..exit一样

您正在对已输入的选择调用exit。如果将内容定义为：

var content = d3.select("#graph").selectAll("div")
    .data(bandMates);

然后输入内容。输入。。。。在回答中共享的第三行代码中，此错误应该会消失

---

Enter和exit是数据选择的函数，因此一旦调用了Enter，以后就不能调用exit并使其有意义。退出必须在相同的数据上。

这里有一个更新的fiddle，有三个更改：

1您的初始selectAll选择器需要更加具体，因为在代码运行一次后，页面中有许多子代div。您需要通过执行selectAll'div.member'来区分排名靠前的成员div和其他div

2您需要一个数据键功能，以便d3在确定何时添加新数据或何时删除旧数据时，比数据长度/位置有更多的工作要做。在您的示例中，这将使每个div.member与单个成员名称关联：databandMates，function d{return d.name；}

3正如Snoozer指出的，在为变量分配选择时，需要更加精确。您无法退出enter选择。

仅树可能原因

这与OP的问题无关，但我在研究它时发现了这个问题，所以为下一个过路人添加了它

在我的例子中，折叠/展开时没有清理d3.layout.tree，因为我忘记在节点上设置节点类。似乎d3树需要设置节点类属性

不起作用

<g transform="translate(20,20)">
    <circle style="fill: rgb(198, 219, 239);" r="8"></circle>
    <text style="fill-opacity: 1;" dx="15" dy="4" id="txt_SELF_SERVICE" class="text">Self Service</text>
</g>

工作

<g transform="translate(20,20)" class="node ">
    <circle style="fill: rgb(198, 219, 239);" r="8"></circle>
    <text style="fill-opacity: 1;" dx="15" dy="4" id="txt_SELF_SERVICE" class="text">Self Service</text>
</g>

---

因此，在本例中，输入和退出永远不会对同一个变量起作用，特别是作为一般规则？输入和退出将对同一个变量起作用。您在原始代码中所做的基本上是mydata.enter.exit。你们不能两个都紧跟在一起。您需要var x=d3.selectstuff.datamydata，然后分别执行x.enter和x.exit。以上Ray的回答在建议良好的数据更新实践方面做得更好哦，我现在明白了。非常感谢您的回复。我正在使用我的atm代码，问题已经解决：@Snoozer使用此代码时，会不断创建新的div。知道发生了什么吗？你的数据是什么样子的？我只是根据Ray的答案在小提琴上试了一下，在dataLove中每个项目得到了4个div，Pete addition=非常感谢你的JSFIDLE。这确实改善了打盹儿的回答。进出仍然是我通往d3的路上的一块绊脚石。