Question

请查看以下fiddle。单击按钮时，它会更新数据。我没有得到的一件事是在draw（）函数中执行bar.exit().remove()的目的。

function draw(data) {
    var scale = d3.scale.linear()
        .domain([0, 50])
        .range([0, 100]);

    var bars = d3.select("#work_queues_chart")
        .selectAll("div")
        .attr("id","work_queues_chart")
        .data(data);

    // enter selection
    bars
        .enter().append("div");

    // update selection
    bars
        .style("width", function (d) {return scale(d) + "%";})
        .text(function (d) {return d;});

    // exit selection
    bars
        .exit().remove();
};

在输入新数据之前是否删除了那里的旧数据？如果是这样，不应该在setting bars.data(data)之前调用它吗？任何启发将不胜感激！

更新

    function draw(data) {
        var bars = d3.select("body")
          .selectAll("div")
          .data(data);
        var charts = bars
          .enter().append("div")
          .attr("class", "bar")
        charts
          .selectAll("button")
          .append("button")
          .text(function (d) { 
            console.log(d)
            return d.name; })
          .attr("class", "my-button")
        bars
          .style("width", function (d) {return d.val*10 + "px";})
          .text(function (d) {
            return d.name; });
        bars
          .exit().remove();
    };

我让更新部件正常工作，但现在按钮未正确添加。我如何追加按钮有什么不对吗？

Answer 1

在你的情况下bars.exit().remove()什么也没做。但是如果更新的数据是少于6个元素的数组，比如4个元素，则bars.exit()将返回没有相应数据的2个DOM节点的选择，.remove()将删除它们。在这种情况下，这就是你想要的。

基本的d3js数据更新

1 个答案: