1

我有一个由树形图可视化的大型数据集。我面临两个问题：

  1. 本地主机上的加载和显示时间非常慢。预计 ajax 调用的性能会更差。我的数据集是 400 个父母，每个人大约有 10-15 个孩子。父母只有孩子（孩子没有孩子）

  2. 因为顶层有 400 个父节点，所以初始树形图非常拥挤。我想要实现的是鱼眼功能。但是，我下面的代码不起作用，这意味着当我将鼠标移到树形图上时，我看不到鱼眼。我看到鼠标 xy 正确输出到控制台。但不是图像。 

var 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)");'

  d3.json("../data/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);
  });

  var xFisheye = d3.fisheye.scale(d3.scale.identity).domain([0, w]).focus(360),
  yFisheye = d3.fisheye.scale(d3.scale.identity).domain([0, h]).focus(90);

  svg.on("mousemove", function() {
        var mouse = d3.mouse(this);
        xFisheye.focus(mouse[0]);
        yFisheye.focus(mouse[1]);
        redraw();
      });

      function redraw() {
          cell.attr("x1", xFisheye).attr("x2", xFisheye);
          cell.attr("y1", xFisheye).attr("y2", xFisheye);
      }       
});
4

0 回答 0