xxxxxxxxxx<meta charset="utf-8"><style>.node { cursor: pointer;}.node:hover { stroke: #000; stroke-width: 1.5px;}.label { font: 16px "Helvetica Neue", Helvetica, Arial, sans-serif; text-anchor: middle; fill: gray; /*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;} .node--root { font: 6px "Helvetica Neue", Helvetica, Arial, sans-serif; }</style><body><script src="//d3js.org/d3.v3.min.js"></script><script>var margin = 20, diameter = 800; function colorMap(n) { console.log(n); colors = { "Virginia": "#fff",//#3366cc", "black": "black", "hispanic": "orange", "white": "#ffe0bd", "asian": "c79778", "indian": "red", "islander": "blue", "2+": "#81fe38", "international": "#fe2da4" } var colores_g = ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"]; return n.depth === 1 ? "white" : colors[n.name]; //return colores_g[n % colores_g.length];}var color = d3.scale.linear() .domain([-1, 5]) .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"]) .interpolate(d3.interpolateHcl);var pack = d3.layout.pack() .padding(2) .size([diameter - margin, diameter - margin]) .value(function(d) { return d.size; })var svg = d3.select("body").append("svg") .attr("width", diameter) .attr("height", diameter) .append("g") .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");d3.json("flare.json", function(error, root) { if (error) throw error; var focus = root, nodes = pack.nodes(root), view; var circle = svg.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 ? colorMap(d) : null; }) .style("fill", function(d) { return colorMap(d); }) .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); }); var text = svg.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) { size = d.size != null ? d.size.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","):""; return d.name + " (" + size + ")"; }); var node = svg.selectAll("circle,text"); d3.select("body") .style("background", "white") .on("click", function() { zoom(root); }); zoomTo([root.x, root.y, root.r * 2 + margin]); function zoom(d) { var focus0 = focus; focus = d; console.log('focus0:', focus0); console.log('focus:', focus); 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; }) //.style("fill-opacity", function(d) { return focus.depth === 0 ? 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", function(d) { return d.r * k; }); }});d3.select(self.frameElement).style("height", diameter + "px");</script> https://d3js.org/d3.v3.min.js