其中存储有数据d3
where are stored data d3
我正在尝试读取一个平面文件，并用这个平面文档创建一个层次结构，以创建可缩放的圆。我的问题是我无法读取圆的位置（变量的值x和y）。我发现了以下代码：http://bl.ocks.org/mbostock/4063269当函数（d）id调用变量节点的attr时，位置x和y直接在"d"中。。。
这是我的代码：
<!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>最后我写了一些东西，在里面有一个分层数据的文件。。。。也许还有更好的东西，但这是一个解决方案：
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);现在我可以使用我的变量根来构建树图/缩放圆。。。
相关文章：
- d3.hexbin插件-动态定义颜色域以适应数据
- 如何为d3.js图表输出组织/嵌套数据
- 添加新数据时D3.JS条形图列偏移量
- 将基本CSV数据加载到D3
- 具有关联数组数据集的D3.js表
- d3在数据更新时错误地附加了dom元素
- d3.csv有很多数据，只画了一个月
- 基本D3.js:使用数据键
- 基本D3.js:如何将具有其他属性的数据绑定到元素
- 如何在D3.js中绘制地图投影上的点，并使用范围滑块过滤数据
- 通过内部数组将JSON数据导入D3.js+Google Map
- 具有多个数据集的分组散点图D3
- 如何使用D3.js根据json中给出的数据在Heatmap中创建可变大小的矩形
- 基于数据d3.js绑定svg梯度
- 其中存储有数据d3
- 如何动态更改力布局图中的数据?D3.
- 将 MySQL 查询结果转换为分层数据 - D3
- 使用复选框过滤数据- D3
- 更新enter().append()块中的数据d3.js
- 同时转换xAxis和数据- D3.js
