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

I'm trying to build a Zoomable TreeMap using d3 js. I need to take an array of JSON objects from the server and pass it to tha treeMap and let the treemap handle it. But in doing so I'm not able to parse it

我正在尝试使用d3 js构建一个Zoomable TreeMap。我需要从服务器获取一组JSON对象并将其传递给tha treeMap并让treemap处理它。但是这样做我无法解析它

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

1 个解决方案

#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. 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函数（但不删除函数体，因为图形将仅使用函数体生成）并传递自己的变量，根据图形类型的要求包含JSON对象。这将适用于几乎所有通过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();
    }

}