javascript - 动态更新 d3.js 树形图

Question

我正在尝试在数据更新时动态更新我的 d3 树形图。我有两个函数，一个是我最初调用的用于构建树形图的函数，另一个是用于重绘树形图的函数。当我重新绘制树状图时，我在树状图顶部看到一个细黑条，并且我正在绘制的数组中的第一个元素变黑。如果我单击两个黑色元素中的任何一个。我收到错误...

Uncaught TypeError: Cannot read property 'dx' of undefined 

因此传递给单元格的数据是未定义的。

此外，当我调用 regraph 时，我已检查并且数据已更改，但图形与我最初构建树状图时相比没有变化，除了两个黑色元素之外。

构建树形图的代码如下。 createObj 函数还接受两个数组并创建一个 Json 对象。

 function drawTreeMap(array1,array2){
        console.log("got to drawing");
        nestedJson=createObj(array1, array2);
            w = 1880 - 80,
            h = 900 - 180,
            x = d3.scale.linear().range([0, w]),
            y = d3.scale.linear().range([0, h]),
            color = d3.scale.linear()
                .range(['lightgreen', 'darkgreen']) // or use hex values
                .domain([computeMin(array2), computeMaxNum(array2)]);
            root,
            node;


            treemap = d3.layout.treemap()
                .round(false)
                .size([w, h])
                .sticky(true)
                .padding([10, 0, 0, 0])
                .value(function(d) { return d.size; });

            svg = d3.select("#body").append("div")
                .attr("class", "chart")
                .style("width", w + "px")
                .style("height", h + "px")
              .append("svg:svg")
                .attr("width", w)
                .attr("height", h)
              .append("svg:g")
                .attr("transform", "translate(.5,.5)");


              node = root = nestedJson;

              var nodes = treemap.nodes(root)
                  .filter(function(d) { return !d.children; });

              var cell = svg.selectAll("g")
                  .data(nodes)
                  .enter().append("svg:g")
                  .attr("class", "cell")
                  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
                  .on("click", function(d) { return zoom(node == d.parent ? root : d.parent); });

              cell.append("svg:rect")
                  .attr("width", function(d) { return d.dx - 1; })
                  .attr("height", function(d) { return d.dy ; })
                  .style("fill", function(d) { return color(d.size)});

              cell.append("svg:text")
                  .attr("x", function(d) { return d.dx / 2; })
                  .attr("y", function(d) { return d.dy / 2; })
                  .attr("dy", ".35em")
                  .attr("text-anchor", "middle")
                  .text(function(d) { return (d.name+",--  "+d.size); })
                  .style("opacity", function(d) { d.w = this.getComputedTextLength(); return d.dx > d.w ? 1 : 0; });




              d3.select(window).on("click", function() { zoom(root); });

              d3.select("select").on("change", function() {
                treemap.value(this.value == "size" ? size : count).nodes(root);
                zoom(node);
              });

    }

重绘代码如下。

function redrawGraphFromJson(data) {
      treemap = d3.layout.treemap()
        .round(false)
        .size([w,h])
        .value(function(d) { return d.size; })
        .sticky(true);

      // Draw the graph
      node = root = data;
      var nodes = treemap.nodes(root)
                  .filter(function(d) { return !d.children; });

      var cell = svg.selectAll("g")
        .data(nodes)
        .attr("class", "cell")
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
        .on("click", function(d) { return zoom(node == d.parent ? root : d.parent); });

    cell.append("svg:rect")
        .attr("width", function(d) { return d.dx - 1; })
        .attr("height", function(d) { return d.dy ; })
        .style("fill", function(d) { return color(d.size);});

    cell.append("svg:text")
        .attr("x", function(d) { return d.dx / 2; })
        .attr("y", function(d) { return d.dy / 2; })
        .attr("dy", ".35em")
        .attr("text-anchor", "middle")
        .text(function(d) { return (d.name+",--  "+d.size); })
        .style("opacity", function(d) { d.w = this.getComputedTextLength(); return d.dx > d.w ? 1 : 0; });

  }

谢谢。

Answer 1

在重新绘制图表时，您需要在初始图表上使用 .exit() ，然后使用 .enter() 使用新数据更新组。这将用新 map 替换旧 map 。

http://bost.ocks.org/mike/join/完美地解释了它，并且有一个非常好的例子可供查看。