使用json对象获取树形图的输入，而不要从csv文件中读取

Question

I'm trying to build a Zoomable TreeMap using d3 js. 我正在尝试使用d3 js构建Zoomable TreeMap。 I need to take an array of JSON objects from the server and pass it to tha treeMap and let the treemap handle it. 我需要从服务器获取一个JSON对象数组，并将其传递给tha treeMap，然后让treemap处理它。 But in doing so I'm not able to parse it 但是这样做我无法解析

Here's my code for the tremap: 这是我的tremap代码：

$rootScope.loadTreeMap = function(path_to_data,dom_element_to_append_to){

        var w = $(dom_element_to_append_to).width() - 80,
            h = 800 - 180,
            x = d3.scale.linear().range([0, w]),
            y = d3.scale.linear().range([0, h]),
            color = d3.scale.category20c(),
            root,
            node;
            console.log("W" + w);
            console.log("h " + h);

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

        var svg = d3.select(dom_element_to_append_to).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(path_to_data, 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);
          });
        });

        function size(d) {
          return d.size;
        }

        function count(d) {
          return 1;
        }

        function zoom(d) {
          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; });

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

    }

` `

Basically it is working fine if I load the data from a csv file stored in my system, but I want to read an array of objects from the server and then build the graph on it. 如果我从存储在系统中的csv文件加载数据，基本上可以正常工作，但是我想从服务器读取对象数组，然后在其上构建图形。

Basically here's my function which reads from the file and parses the JSON objects: 基本上这是我的函数，它从文件读取并解析JSON对象：

d3.json(path_to_data, function(data) {
            /*console.log("data");
            console.log(data);
            console.log("data");
            data = JSON.parse(inputData);
            console.log(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);
          });
        });

But I want to do something different like 但是我想做一些不同的事情

node = root = inputdata  ;   here input data is array of json objects fetched from server
var nodes = treemap.nodes(root).filter(function(d) { return !d.children; });
var cell = svg.selectAll("g")

Answer 1

i figured the solution to this just remove the d3.csv function ( but don't remove the body of function as your graph will generate with the body of functions only) and pass your own variable conatining the JSON objects as required by the graphs type. 我想出了解决方案，只需删除d3.csv函数（但不要删除函数主体，因为您的图形将仅使用函数主体生成），并根据图形类型的要求传递自己的变量来包含JSON对象。 This will work in approximately all graphs in which data is taken through d3.csv or d3.json here's a working code 这几乎适用于所有通过d3.csv或d3.json采集数据的图形，这是一个工作代码

$rootScope.loadTreeMap = function(path_to_data,dom_element_to_append_to){

    var w = $(dom_element_to_append_to).width() - 80,
        h = 800 - 180,
        x = d3.scale.linear().range([0, w]),
        y = d3.scale.linear().range([0, h]),
        color = d3.scale.category20c(),
        root,
        node;
        console.log("W" + w);
        console.log("h " + h);

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

    var svg = d3.select(dom_element_to_append_to).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(path_to_data, function(data) {*/
      remove the above line and insert your own JSON object variable like 
      data = inputData(your own JSON variable)

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

    function size(d) {
      return d.size;
    }

    function count(d) {
      return 1;
    }

    function zoom(d) {
      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; });

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

}

使用json对象获取树形图的输入，而不要从csv文件中读取

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-01-04 20:04:46

使用json对象获取树形图的输入，而不要从csv文件中读取

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-01-04 20:04:46

解决方案1
0 已采纳 2017-01-04 20:04:46