退出不正常

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

然后content.enter()....在你的答案中分享的第3行代码中,这个错误应该消失.

Enter()并且exit()是选择数据的功能,所以一旦你打电话,enter()你就不能再打电话exit()让它变得有意义.exit()必须是相同的数据.

Answer 2

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

1)您的初始selectAll选择器需要更具体,因为在代码运行一次后页面中有许多后代div.您需要通过执行操作来区分最顶层的成员div和其他成员divselectAll('div.member')

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

3)正如Snoozer指出的那样,在为变量分配选择时需要更加精确.你不能从enter()选择中退出().