具有10,000個節點的d3.js樹圖

Question

接收新數據時更新並重新渲染的js樹圖。 我建立了包含50個元素的數據集，並且效果很好。 但是，我試圖在更大的數據集10,000個元素上運行相同的代碼。 而且它似乎無法渲染圖形，有人知道在大型數據集上使用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); 
          }
     });

}

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

同樣，空白是指這個。

圖片鏈接在這里。 [ http://i.stack.imgur.com/LTLk6.png][1]

Answer 1

您可以將數據流傳輸到D3，請查看這篇文章，其中顯示了將數據實時流傳輸到圖形。