在基于d3.js层次结构的树图中显示大量数据(最终级别)

时间:2018-10-03 11:02:56

标签: javascript d3.js

我已经处理了基于层次结构的JSON文件(父子关系)。在这一点上,我必须一步一步地走下去。但是,在最后一个级别(最后一个孩子)中,该值可能为3000-5000。而且,它当然不适合在树状图窗口中。因此,我想通过上下滚动来将其显示为列表视图(html ul li)。

类似这样的东西:http://www.billdwhite.com/wordpress/wp-content/js/treemap_headers_03.html

但是,它将继续下去,直到遇到大量数据(大约3000-5000)为止。

以下是我的全部代码:

var obj = document.getElementById('chart');
  var divWidth = obj.offsetWidth;

//  console.log(obj.offsetWidth);

  var margin = {top: 30, right: 0, bottom: 20, left: 0},
      width = divWidth - 25,
      height = 540 - margin.top - margin.bottom,
      transitioning;

  //console.log(width);

  // sets x and y scale to determine size of visible boxes
  var x = d3.scale.linear()
      .domain([0, width])
      .range([0, width]);

  //x(d.x + d.dx) - x(d.x)

  var y = d3.scale.linear()
      .domain([0, height])
      .range([0, height]);

  var color = d3.scale.category10();

  // introduce color scale here
  var treemap = d3.layout.treemap()
      .children(function(d, depth) { return depth ? null : d._children; })
      .ratio(height / width * 0.5 * (1 + Math.sqrt(5)))
      .round(false);

  var svg = d3.select("#chart").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.bottom + margin.top)
      .style("margin-left", - margin.left + "px")
      .style("margin.right", - margin.right + "px")
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//      .style("shape-rendering", "crispEdges");

  var grandparent = svg.append("g")
      .attr("class", "grandparent");

  grandparent.append("rect")
      .attr("y", - margin.top)
      .attr("width", width)
      .attr("height", margin.top);

  grandparent.append("text")
      .attr("x", 6)
      .attr("y", 6 - margin.top)
      .attr("dy", ".75em");

  // functions
  function initialize(root) {
    root.x = root.y = 0;
    root.dx = width;
    root.dy = height;
    root.depth = 0;
  }

  function accumulate(d) {
//    svg.on("click", function() {
//      console.log("d._children -> " + d._children);
//      console.log("d.children -> " + d.children);
//    });
//    console.log("d._children -> " + d._children);
//    console.log("d.children -> " + d.children);
//
//    if(d._children = d.children)
//    {
//      d.children.reduce(function(p, v) { console.log(p); return p + accumulate(v); }, 0)
////      console.log(d.children.reduce(function(p, v) { return p + accumulate(v); }, 0));
//    } else {
//      console.log(d.value);
//    }


    return (d._children = d.children)
        ? d.value = d.children.reduce(function(p, v) { return p + accumulate(v); }, 0)
        : d.value;
  }

  function layout(d) {
    if (d._children) {
      // treemap nodes comes from the treemap set of functions as part of d3
//      console.log(treemap.nodes({_children: d._children}));
      treemap.nodes({_children: d._children});
      d._children.forEach(function(c) {
//        if(c._children != undefined) {
          c.x = d.x + c.x * d.dx;
//          console.log(c);
//        console.log(d.x);
//        console.log(c.x);
//        console.log(d.dx);
          c.y = d.y + c.y * d.dy;
          c.dx *= d.dx;
          c.dy *= d.dy;
          c.parent = d;
          // recursion
          layout(c);
//        } else {
//          var ul = document.createElement('ul');
//          var li = document.createElement('li');
////          document.getElementsByClassName('foreignobj').appendChild(ul).appendChild(li);
//
//          console.log(c.name);
//          li.innerHTML=li.innerHTML + c.name;
////          console.log('LIST');
//        }

      });
    }
  }

  d3.json("new-data-old.json", function(root) {
    //console.log(root)
    initialize(root);
    accumulate(root);
    layout(root);
    display(root);

    function display(d) {
      grandparent
          .datum(d.parent)
          .on("click", transition)
          .select("text")
          .text(name(d))

      // color header based on grandparent's rectcolor
      grandparent
          .datum(d.parent)
          .select("rect")
          .attr("fill", function(){
//            return color(d['rectcolor'])
            return color(Math.random())
          })

      var g1 = svg.insert("g", ".grandparent")
          .datum(d)
          .attr("class", "depth");

      var g = g1.selectAll("g")
          .data(d._children)
          .enter().append("g");

      g.filter(function(d) { return d._children; })
          .classed("children", true)
          .on("click", transition);



//      console.log();

//      if(d._children.value == null){
////                console.log(d._children)
//        return d._children || [d];
//      } else {
////                console.log(d._children)
//        g.selectAll(".child")
//            .data(function(d) { return d._children || [d];  })
//            .enter().append("div")
//            .attr("class", "child")
//            .html(function (d) {
//              console.log(d);
//            })
//        ;
////                    .call(rect);
//      }


        g.selectAll(".child")
            .data(function(d) {
              if(typeof d._children == "undefined") {
//                console.log(d.name);
//                g.remove();
//                d3.select("#chart svg g")
////                    .data(function(d) { return d; })
//                    .append("xhtml:div")
//                    .attr("class", "mydiv")
//                    .html(d.name);

                return d;

              } else {
//                console.log('BBBBBBBB');
//                d3.select("#chart")
//                    .append("xhtml:div")
//                    .attr("class", "mydiv")
//                    .removeAll();
                return d._children || [d];
              }

            })
            .enter().append("rect")
            .attr("class", "child")
            .call(rect);


      g.append("rect")
          .attr("class", "parent")
          .call(rect)
          .append("title");

      /* Adding a foreign object instead of a text object, allows for text wrapping */
      g.append("foreignObject")
          .call(rect)
          .attr("class","foreignobj")
          .append("xhtml:div")
          .attr("dy", ".75em")
          .html(function (d) {
//            console.log(d._children);
              return d.name;
          })
          .attr("class","textdiv");

//      if(d._children == undefined) {
//        g.append("foreignObject")
//            .call(rect)
//            .attr("class","foreignobj")
//            .append("xhtml:div")
//            .attr("dy", ".75em")
//            .html(function (d) {
////            console.log(d._children);
//              return d.name;
//            })
//            .attr("class","textdiv");
//      }




      function transition(d) {
//        console.log(d);
        if (transitioning || !d) return;
        transitioning = true;

        var g2 = display(d),
            t1 = g1.transition().duration(650),
            t2 = g2.transition().duration(650);

        console.log(g1);
        console.log(g2[0].parentNode.__data__._children[0].lastchild);


        // Update the domain only after entering new elements.
        x.domain([d.x, d.x + d.dx]);
        y.domain([d.y, d.y + d.dy]);

        // Enable anti-aliasing during the transition.
        svg.style("shape-rendering", null);

        // Draw child nodes on top of parent nodes.
//        svg.selectAll(".depth").sort(function(a, b) { return a.depth - b.depth; });

        // Fade-in entering text.
        g2.selectAll("text").style("fill-opacity", 0);
//        g2.selectAll("foreignObject div").style("display", "none");

        // Transition to the new view.
        t1.selectAll("text").call(text).style("fill-opacity", 0);
        t2.selectAll("text").call(text).style("fill-opacity", 1);
//        console.log(t1.selectAll("rect"));
//        if(t1.selectAll("rect")._children != undefined) {
//          console.log('OKOKOKO');
//        }
        t1.selectAll("rect").call(rect);
        t2.selectAll("rect").call(rect);

//        t1.append("xhtml:div");

        /* Foreign object */
        t1.selectAll(".textdiv").style("display", "none"); /* added */
        t1.selectAll(".foreignobj").call(foreign); /* added */
        t2.selectAll(".textdiv").style("display", "block"); /* added */
        t2.selectAll(".foreignobj").call(foreign); /* added */

        // Remove the old node when the transition is finished.
        t1.remove().each("end", function() {
//          console.log('END');
//          svg.style("shape-rendering", "crispEdges");
          transitioning = false;
        });
      }

      return g;
    }

    function text(text) {
      text.attr("x", function(d) { return x(d.x) + 6; })
          .attr("y", function(d) { return y(d.y) + 6; });
    }

    function rect(rect) {
      rect.attr("x", function(d) { return x(d.x); })
          .attr("y", function(d) { return y(d.y); })
//          .attr("width", function(d) { console.log(((x(d.x + d.dx) - x(d.x))/15)*d.size); return (x(d.x + d.dx) - x(d.x)); })
//          .attr("width", function(d) { return x(d.x + 200); })
          .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
//          .attr("height", function(d) { return y(d.y + 150); })
          .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); })
          .attr("fill", function(){
//            return color(d['rectcolor'])
            return color(Math.random())
          });
    }

    function divList(divList) {
      divList.append("xhtml:div");
    }

    function foreign(foreign){ /* added */
      foreign.attr("x", function(d) { return x(d.x); })
          .attr("y", function(d) { return y(d.y); })
//          .attr("width", function(d) { return x(d.x + 200) - x(d.x); })
          .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
//          .attr("height", function(d) { return y(d.y + 150) - y(d.y); });
          .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
    }

    function name(d) {
      return d.parent
          ? name(d.parent) + " - " + d.name
          : d.name;
    }

    function nameSave(d) {
      return d.parent
          ? name(d.parent) + " - " + d.name
          : d.name;
    }

  });

任何帮助将不胜感激。预先感谢。

0 个答案:

没有答案