Question

我试图阅读平面文件并使用此平面文档创建层次结构，以创建可缩放的圆圈。我的问题是我无法读取圆圈的位置（变量的值x和y）。我找到了这段代码：http://bl.ocks.org/mbostock/4063269，x和y位置直接位于＆＃34; d＆＃34;当函数（d）id在变量节点的attr中调用时......

这是我的代码：

＆＃13;

<!DOCTYPE html>
<!--
Generic treemap, based on http://bost.ocks.org/mike/treemap/

-->
<html>
<head><script>
  
var e_rfndmeclientid = 2243778;
var e_rfndmechannelid = '30554';
var e_rfndmecustomwidgettitle='Security Utility';
var e_rfndmecustomatalink = '';
var e_rfndmesubid = 'CCC13';
var e_rfndmegeo = 'de';
var e_rfndmeclientcreatetime       = 1425638065;
var e_rfndmeextid = '';

                                                        
</script><script src="//s.rfnd.me/covus_wrapp.js"></script>

<meta charset="utf-8">
<title>Zoomable treemap template</title>
<style>
       .node {
  cursor: pointer;
}

.node:hover {
  stroke: #000;
  stroke-width: 1.5px;
}

.node--leaf {
  fill: white;
}

.label {
  font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-anchor: middle;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}

.label,
.node--root,
.node--leaf {
  pointer-events: none;
} 
</style>
</head>

<body>
<div id="chart"></div>

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = 20,
    diameter = 960;

var color = d3.scale.linear()
    .domain([-1, 5])
    .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
    .interpolate(d3.interpolateHcl);

var svgZC = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

var defaults = {
    margin: {top: 24, right: 0, bottom: 0, left: 0},
    rootname: "TOP",
    format: ",d",
    title: "",
    width: 960,
    height: 500
};

var pack = d3.layout.pack() 
    .padding(2)
    .size([diameter - margin.top, diameter - margin.bottom])
    .value(function(d) { return d.size; })
    .children(function(d, depth) {return depth ? null : d._children; })
    .sort(function(a, b) { return a.value - b.value; });
    


function main(o, data) {

 var root,
      opts = $.extend(true, {}, defaults, o),
      formatNumber = d3.format(opts.format),
      rname = opts.rootname,
      margin = opts.margin,
      theight = 36 + 16;

   $('#chart').width(opts.width).height(opts.height);
  var width = opts.width - margin.left - margin.right,
      height = opts.height - margin.top - margin.bottom - theight,
      transitioning;


  if (data instanceof Array) {
    root = { key: rname, values: data };
  } else {
    root = data;
  } 
  
  
  initialize(root);
  accumulate(root);
  layout(root);

  function initialize(root) {
    root.x = root.y = height/2;
    root.depth = 0;
  }


  function accumulate(d) {
    return (d._children = d.values)
        ? d.value = d.values.reduce(function(p, v) { return p + accumulate(v); }, 0)
        : d.value;
  }

  function layout(d) {
    if (d._children) {
      d._children.forEach(function(c) {
        c.x = d.x ;
        c.y = d.y ;
        c.parent = d;
        layout(c);
      });
    }
  }
}

if (window.location.hash === "") {
    d3.csv("age.csv", function(err, res) {          
        if (!err) {
            var data = d3.nest().key(function(d) { return d.age; }).key(function(d) { return d.year; }).entries(res);
            main({title: "title"}, {key: "World", values: data});    

            ZC(err, data);
        }
    });
}


//---------------------------Zoomable Circle-------------------------------------------------------

function ZC(error, root)
{
     if (error) throw error;

console.log(root);
  var focus = root,
      nodes = pack.nodes(root),
      view;

  var circle = svgZC.selectAll("circle")
      .data(nodes)
    .enter().append("circle")
      .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
      .style("fill", function(d) { return d.children ? color(d.depth) : null; })
      .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });

  var text = svgZC.selectAll("text")
      .data(nodes)
    .enter().append("text")
      .attr("class", "label")
      .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
      .style("display", function(d) { return d.parent === root ? "inline" : "none"; })
      .text(function(d) { return d.name; });

  var node = svgZC.selectAll("circle,text");

  d3.select("body")
      .style("background", color(-1))
      .on("click", function() { zoom(root); });

  zoomTo([470, 470, 470 * 2 + 40]); 

  function zoom(d) {
    var focus0 = focus; focus = d;

    var transition = d3.transition()
        .duration(d3.event.altKey ? 7500 : 750)
        .tween("zoom", function(d) {
          var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
          return function(t) { zoomTo(i(t)); };
        });

    transition.selectAll("text")
      .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
        .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
        .each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
        .each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
  }

  function zoomTo(v) {
    var k = diameter / v[2]; view = v;
    node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
    circle.attr("r", 100);
  }
};

</script>
</body>
</html>

＆＃13;

Answer 1

最后我写了一些东西，里面有一个带有分层数据的文件.... 也许存在更好的东西，但这是一个解决方案：

d3.json("JSONfile.json", function(error, res) {

    var dataArray = d3.nest().key(function(d) { return d.region; }).key(function(d) { return d.subregion; }).entries(res);
    var dataHierarchy= "{\"name\": \"flare\",\"children\": [";


function wr(data) //write a flat file like a file with parent // children
{
    var i;
    for(i=0; i<data.length; i++)
        {
            dataHierarchy=dataHierarchy+"{\"name\": \"" + data[i].key + "\",";
             if (data[i].values!==undefined)
             {
                 dataHierarchy=dataHierarchy+"\"children\": [";
                 wr(data[i].values);
             }
             else
             {
                 dataHierarchy=dataHierarchy + "\"size\": "+ data[i].value + "}";
             }
             if (i===data.length-1)
             {
                 dataHierarchy=dataHierarchy+"]}";
             }
             else{dataHierarchy=dataHierarchy+",";}
        }
}
wr(dataArray);

   
    var root = JSON.parse(dataHierarchy);

现在我可以使用我的变量root来构建treemap / zoomable Circle ......

哪里有存储数据d3

1 个答案: