9

你好，我对 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/

谢谢阅读！

4

3 回答 3

12

您已将内容定义为：

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()

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

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

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

Enter()并且exit()是数据选择的函数，所以一旦你调用了enter()你就不能再调用exit()它并让它变得有意义。exit()必须在相同的数据上。

于 2013-08-05T21:36:41.983 回答
10

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

1）您的初始 selectAll 选择器需要更具体，因为您的代码运行一次后页面中有许多后代 div。您需要通过以下方式区分最顶层的成员 div 和其他成员selectAll('div.member')

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

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

于 2013-08-05T21:49:09.363 回答
1

仅树可能的原因...

这与 OP 的问题无关，但我在研究时发现了这个 SO 问题，因此将其添加给下一个路人。

在我的情况下，在折叠/展开时清理 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>
于 2015-01-28T23:16:33.310 回答