D3 Treemap для родителей и детей

javascript jquery d3.js treemap

982 просмотра

1 ответ

81 Репутация автора

Пытаясь понять этот пример http://bl.ocks.org/hemulin/3247757 из TreeMap , которая использует функцию масштабирования. В настоящее время древовидная карта использует дочерние элементы для отображения на уровне 0. Я пытаюсь изменить его, чтобы он мог отображать родительский элемент на уровне 0, а при щелчке по нему будет увеличиваться и отображать дочерние элементы на уровне 1.

Я посмотрел пример Treemap, но не понимаю их. Я не ожидаю, что кто-то сделает это для меня. Просто точка в правильном направлении была бы отличной.

Мой код:

    var w = 1280 - 80,
    h = 800 - 180,
    x = d3.scale.linear().range([0, w]),
    y = d3.scale.linear().range([0, h]),
    color = d3.scale.category10(),
    root,
    node;

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

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


      node = root = pathJson;

      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) {
      //alert(d.name);
      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; });
          //.style("font-size", function(d) { return kx * d.dx > d.w ? "20px" : "12px";});

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

https://jsfiddle.net/noobiecode/9ev9qjt3/1/

Спасибо заранее.

Автор: user3837019 Источник Размещён: 10.07.2016 08:55

Ответы (1)


0 плюса

81 Репутация автора

Решение

Изменен cell.text (function (d) {return d.name;}) на cell.text (function (d) {return d.parent.name;}). Это теперь получает имя родителя вместо детей.

Автор: user3837019 Размещён: 12.07.2016 08:08
Вопросы из категории :
32x32