Svg 更新时d3树映射直接方向错误

我编写了一个d3.js树状图，当我收到新数据时更新并重新呈现。当我绘制地图时，矩形有时会移动位置，而且看起来元素的方向是混乱的，因为它们移动到图表之外或与另一个元素重叠，在整个图形中留下空白，但在重新渲染之后，图形通常会自动更正，然后再次混乱。我认为问题的产生是因为图形正在根据绝对位置调整自身大小，但是上一次渲染中某些位置的矩形会把事情搞砸。在能够重新渲染之前，有没有线索可以阻止这个中间阶段出现混乱的图形？谢谢

这是我最初用来绘制d3重绘图的代码

function drawTreeMap(array1,array2, colorArray)
{
  console.log("got to drawing"); 
  var cellMargin=5;
  this.marginTree = {top:20, right:20, bottom:20, left:20};
  var coloring = d3.scale.linear()
          .range(['lightblue', 'green']) // or use hex values
          .domain([this.getMinOfThisArray(colorArray), this.getMaxOfThisArray(colorArray)]);
  this.nestedJson = this.createObj(array1, array2, colorArray);
      this.w = 1700 - 80,
      this.h = 980 - 180,
      this.x = d3.scale.linear().range([0, this.w]),
      this.y = d3.scale.linear().range([0, this.h]),

      this.root,
      this.node;


      this.treemap = d3.layout.treemap()
          .round(false)
          .size([this.w, this.h])
          .sticky(true)
          .padding([this.marginTree.bottom, this.marginTree.right, this.marginTree.top, this.marginTree.left])
          .sort(function(a,b) {
                return a.value - b.value;
            })
          .value(function(d) { return d.size; });

      this.svg = d3.select("#body").append("div")

          .attr("class", "chart")
          .style("position", "relative")
          .style("width", (this.w) + "px")
          .style("height", (this.h ) + "px")
          .style("left", this.marginTree.left +"px")
          .style("top", this.marginTree.top + "px")
        .append("svg:svg")
          .attr("width", this.w)
          .attr("height", this.h)
        .append("svg:g")
          .attr("transform", "translate(.5,.5)");


        this.node = this.root = this.nestedJson;



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

        this.tip = d3.tip()
              .attr('class', 'd3-tip')
              .html(function(d) {
                return "<span style='color:white'>" + (d.name+",\n "+d.size) + "</span>";
              })
        this.svg.call(this.tip);

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

        var borderPath = this.svg.append("rect")
            .attr("class", "border")
            .attr("x", this.marginTree.left)
            .attr("y", this.marginTree.top)
            .attr("height", this.h - this.marginTree.top - this.marginTree.bottom )
            .attr("width", this.w - this.marginTree.left - this.marginTree.right)
            .style("stroke", 'darkgrey')
            .style("fill", "none")
            .style("stroke-width", '3px');


        cell.append("svg:rect")
            .attr("id", function(d,i) { return "rect-" + (i+1); })
            .attr("class","highlighting2 cell-rects")
                .attr("title", function(d) {return (d.name+", "+d.size);})
                .attr("data-original-title", function(d) {return (d.name+",\n "+d.size);})
          .attr("width", function(d) { return d.dx ; })
          .attr("height", function(d) { return d.dy ; })
          .on('mouseover', this.tip.show)
                .on('mouseout', this.tip.hide)
          .style("fill", function(d) {return coloring(d.color);});


        cell.append("svg:text")
            .attr("class", "treemap-text nameTexts") 
            .attr("id", function(d,i) { return "name-" + (i+1); })
            .attr("x", cellMargin)  
            .attr("y", function(d) {  return parseInt($('.treemap-text').css('font-size'))+cellMargin; })
          .text(function(d) {return (d.name);});

       cell.append("svg:text")
            .attr("class", "treemap-text sizeTexts") 
            .attr("id", function(d,i) { return "size-" + (i+1); })  
            .attr("x", cellMargin)  
            .attr("y", function(d) {  return 2*parseInt($('.treemap-text').css('font-size'))+2*cellMargin; })
            .text(function(d) {return (d.size);});

       // d3.selectAll("svg:rect")
       //    .style("stroke-width", 2)
       //    .style("stroke", function(d){ return this.LightenDarkenColor(coloring(d.color), -5);});



          this.treeMapping = true;
        $(document).ready(function(){

            for (var i =1 ; i<graphObj.rc.positions[graphObj.currentVpName].SetSize; i++){
                var obj = "rect-"+i;
                var size = "size-"+i;
                var name = "name-"+i;
                graphObj.formatNumbers(size);
                graphObj.placeTextWithEllipsis(obj, size);
                graphObj.placeTextWithEllipsis(obj, name);

                }
          d3.selectAll(".nameTexts")
          .style("fill", "#333333");
         d3.selectAll(".sizeTexts")
          .style("fill","#383838");

         });
}

我说的空白也是这个意思

---

图片链接在这里。[

更新时不需要重置树映射的属性。好的，谢谢，但这并不能解决方向问题。

function redrawGraph(array1, array2, colorArray)
{   

   this.nestedJson = this.createObj(array1, array2, colorArray);
  var coloring = d3.scale.linear()
          .range(['lightblue', 'green']) // or use hex values
          .domain([this.getMinOfThisArray(colorArray), this.getMaxOfThisArray(colorArray)]);
   var cellMargin = 5;

  this.svg = d3.select("#body").append("div")

  this.treemap
    .mode("squarify")
    .round(false)
    .size([this.w,this.h])
    .sticky(true)
    .value(function(d) { return d.size; });


  // Draw the graph


  this.node = this.root = this.nestedJson;

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



  var rect = d3.select("#body").selectAll(".cell-rects")
        .data(nodes);

  rect.exit().remove();

  rect.enter().append("rect");

  rect
    .transition()
    .attr("width", function(d) { return d.dx ; })
    .attr("height", function(d) { return d.dy ; })
        .attr("title", function(d) {return (d.name+", "+d.size);})
        .attr("data-original-title", function(d) {return (d.name+",\n "+d.size);})
    .style("fill", function(d) { return coloring(d.color)})
    .call(this.position);

  var text = d3.select("#body").selectAll(".nameTexts")
        .data(nodes);


  text.exit().remove();

  text.enter().append("text");

  text
    .attr("class", "treemap-text nameTexts")
    .attr("x", cellMargin)  
    .attr("y", function(d) {  return parseInt($('.treemap-text').css('font-size'))+cellMargin; })
    .text(function(d) { return (d.name); });


  var text2 = d3.select("#body").selectAll(".sizeTexts")
        .data(nodes);

  text2.exit().remove();

  text2.enter().append("text");

  text2
    .attr("class", "treemap-text sizeTexts")
    .attr("x", cellMargin)  
    .attr("y", function(d) {  return 2*parseInt($('.treemap-text').css('font-size'))+2*cellMargin; })
    .text(function(d) { return (d.size); });

  var cell = this.svg.selectAll("g")
    cell.append("svg:rect")
    cell.append("svg:text");

  // var border = this.svg.append("rect")
  //   .attr("x", this.marginTree.left)
  //   .attr("y", this.marginTree.top)
  //   .attr("height", this.h - this.marginTree.top - this.marginTree.bottom )
  //   .attr("width", this.w - this.marginTree.left - this.marginTree.right)
  //   .style("stroke", 'darkgrey')
  //   .style("fill", "none")
  //   .style("stroke-width", '3px');


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

    // d3.select("select").on("change", function() 
    // {
    //   this.treemap.value(this.value == "size" ? this.size : this.count).nodes(this.root);
    //   this.zoom(this.node);
    // });
    d3.selectAll(".nameTexts")
      .style("fill", "#333333");
   d3.selectAll(".sizeTexts")
    .style("fill","#383838");

    $(document).ready(function(){

      for (var i =1 ; i<graphObj.rc.positions[graphObj.currentVpName].SetSize; i++){
          var obj = "rect-"+i;
          var size = "size-"+i;
          var name = "name-"+i;
          graphObj.formatNumbers(size);
          graphObj.placeTextWithEllipsis(obj, size);
          graphObj.placeTextWithEllipsis(obj, name); 
          }
     });

function position()
 {
    this.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"; });
 }