D3.js 动态更新 Treemap

Question

我想用新数据动态更新树状图。我读过这篇 article但我不会启动并运行它。所以这是我的代码:

function buildTreemap(jVals){
    //$("#treemap").empty();

    var data = jQuery.parseJSON(jVals);

    var margin = {top: 40, right: 10, bottom: 10, left: 10},
        width = 760 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var treemap = d3.layout.treemap()
        .size([width, height])
        .sticky(true)
        .sort(function(a,b) { return a.anzahl - b.anzahl; })
        .round(true)
        .value(function(d) { return Math.log(d.anzahl); });

    var div = d3.select("#treemap").append("div")
        .style("position", "relative")
        .style("width", (width + margin.left + margin.right) + "px")
        .style("height", (height + margin.top + margin.bottom) + "px")
        .style("left", margin.left + "px")
        .style("top", margin.top + "px")
        .attr("id", "first");

    var node = div.datum(data).selectAll(".node")
        .data(treemap.nodes)
        .enter().append("div")
        .attr("class", "node")
        .style("left", function(d) { return d.x + "px"; })
        .style("top", function(d) { return d.y + "px"; })
        .style("width", function(d) {  return Math.max(0, d.dx - 1) + "px"; })
        .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; })
        .style("background", function(d) { return d.color ? d.color : "#ffffff";})
        .text(function(d) { return d.children ? "blue" : d.keytable + "(" + d.anzahl + "-" + Math.max(0, d.dx) + "-" + Math.max(0, d.dy) + ")"; })
        ;

};

从另一个 Js-Function 我用新数据调用 buildTreemap() 。现在我希望树状图使用过渡/持续时间重新绘制。

任何人都可以请帮助我。
非常感谢...

更新:
我已经添加了这个:

d3.selectAll("input").on("change", function change() {
        var value = this.value === "count"
            ? function() { return 1; }
            : function(d) { return Math.log(d.anzahl); };

        node
            .data(treemap.value(value).nodes)
            .transition()
            .duration(1500)
            .call(position);
    });

如果我单击“更改”-输入，则使用此代码重建树状图。但是，如果我使用此代码:

d3.selectAll("#search").on("keyup", function change() {
        var value = function(d) { return Math.log(d.anzahl); };

        node
            .data(treemap.value(value).nodes)
            .transition()
            .duration(1500)
            .call(position);
    });

树状图保持不变，另一个带有新数据值的树状图在我的第一个下方打开。在 keyup 上，另一个 js 函数被触发并将新数据发送到 buildTreemap()。

Answer 1

我已经稍微简化和修改了您的 jsfiddle here单击按钮时显示第二组数据。关键是在单击按钮时调用的函数内部，您像初始化树形图时一样传入新数据，然后相应地处理输入和更新选择，如下所示:

var node = div.datum(data2).selectAll(".node")
          .data(treemap.nodes);
node.enter().append("div")
    .attr("class", "node");

node.transition().duration(1500).call(position)
    .style("background", function(d) { return d.color ? d.color : "#ffffff"; })
    .text(function(d) { return d.children ? "blue" : d.keytable + "(" + d.anzahl + "-" + Math.max(0, d.dx) + "-" + Math.max(0, d.dy) + ")"; });

请注意，输入选择合并到更新选择中，因此只需附加节点并在更新选择上设置属性就足够了。