Question

我是JS的新手，也是使用d3的新手。我正在一个需要调整大小的元素中创建一个可缩放的树形图。因此，理想情况下，树图应自行调整大小以适应其父元素。到目前为止，我能够实现这一目标的唯一方法是重新创建树形图 - 这是不可接受的。我想知道您能看一下这段代码并向我提出任何建议吗？

changeSize: function() {
        // I can destroy and recreate the treemap here - but it's not what I want
        var svg = d3.select("svg");
            svg
            .attr("width", 500) 
            .attr("height", 500);
        // svg is resized but elements within it are not re-rendered
    },


    treemap: function(element) {

        //Used when I destroy and re-create
        var w = $(element).width();
        var h = $(element).width()/2;

        var x = d3.scale.linear().range([0, w]),
            y = d3.scale.linear().range([0, h]),
            color = d3.scale.category20c(),
            root,
            node;

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

        var svg = d3.select(element).append("div")
            .attr("class", "chart")
            .style("width", "100%")
            .style("height", "100%")
            .append("svg:svg")
            .attr("width", w)
            .attr("height", h)
            .append("svg:g")
            //.attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
            //.attr("transform", "translate(.5,.5)");

        d3.json("flare.json", function(data) {
          node = root = data;

          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 - 1; })
              .style("fill", function(d) { return color(d.parent.name); });

          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; })
              .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 size(d) {
        return d.size;
      }

      function count(d) {
        return 1;
      }

      function zoom(d) {
        var kx = w / d.dx, ky = h / d.dy;
        x.domain([d.x, d.x + d.dx]);
        y.domain([d.y, d.y + d.dy]);

        var t = svg.selectAll("g.cell").transition()
            .duration(d3.event.altKey ? 7500 : 750)
            .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });

        t.select("rect")
            .attr("width", function(d) { return kx * d.dx - 1; })
            .attr("height", function(d) { return ky * d.dy - 1; })

        t.select("text")
            .attr("x", function(d) { return kx * d.dx / 2; })
            .attr("y", function(d) { return ky * d.dy / 2; })
            .style("opacity", function(d) { return kx * d.dx > d.w ? 1 : 0; });

        node = d;
        d3.event.stopPropagation();
      }

    },

正如您所看到的，树形图是Web上的一个示例，只有很少的更改。我正在使用类似Backbone的框架。 changeSize（）函数由父元素的事件触发。

父元素更改大小时调整d3树形图的大小

0 个答案: