2016-12-16 62 views
0

我想用d3 js构建一个Zoomable TreeMap。我需要从服务器获取一组JSON对象,并将其传递给thaMapMap,并让树图处理它。但在这样做,所以我不能够解析它使用JSON对象的树形图输入不从csv文件读取

这里是我的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(); 
     } 

    } 

`

基本上,如果我从存储csv文件加载的数据它工作正常在我的系统中,但我想从服务器读取一个对象数组,然后在其上构建图形。

基本上这里是我的功能,从文件中读取并分析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); 
      }); 
     }); 

但我想做些不同的事像

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

回答

0

我想出解决这个只是删除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(); 
    } 

}