Question

你好我是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

我错过了什么吗？我去了Bostock的教程，一切似乎都没问题。

我已经完成了一个JSFiddle来检查我的代码：

http://jsfiddle.net/9HTUM/

感谢阅读！

Answer 1

您已将内容定义为：

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

因此，当您执行content.exit()时，就像尝试d3.select("#graph").selectAll("div").data(bandMates).enter()..exit()

一样

您正在为已输入的选项调用退出。如果您将内容定义为：

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

然后在您在答案中分享的第3行代码中执行content.enter()....，此错误应该消失。

Enter()和exit()是一系列数据的功能，因此，在您拨打enter()后，您无法再调用exit()并使其有意义。 exit()必须使用相同的数据。

Answer 2

这是一个更新的小提琴，有三个变化：http://jsfiddle.net/URpfB/

1）您的初始selectAll选择器需要更具体，因为代码运行一次后页面中有许多后代div。您需要通过执行selectAll('div.member')

来区分最顶层的成员div和其他成员div

2）您需要一个数据键功能，因此d3比数据长度/位置更多，以确定何时添加新数据或删除旧数据。在您的示例中，这将使每个div.member与单个成员名称相关联：data(bandMates, function(d){return d.name;})

3）正如Snoozer指出的那样，在为变量分配选择时需要更加精确。你不能从enter（）选择中退出（）。

Answer 3

仅限树木可能......

这与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>

退出不正常

3 个答案: