[英]D3 - Can't get packed circles to work from csv
I am unable to get this seemingly simple code to work. 我无法使用此看似简单的代码来工作。 I have a csv file with 5 rows of data and trying to create a bubble chart out of it!
我有一个包含5行数据的csv文件,并试图从中创建一个气泡图! Really appreciate if someone can help!
非常感谢有人能帮忙!
<body>
<script type="text/javascript">
var diameter = 960,
format = d3.format(",d"),
color = d3.scale.category20c();
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(1.5);
var svg = d3.select("#svgid")
.append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class","bubble");
//Data
//var dataset = [ 5, 10, 15, 20, 25 ];
d3.text("http://bpgpuae.com/bil-rupeex.csv", function(csvData) {
var dataset = d3.csv.parse(csvData);
var node = svg.selectAll(".node")
.data(bubble.nodes(dataset))
.enter().append("g")
.attr("class", "node");
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("title")
.text(function(d) { return d.scam + ": " + format(d.funds); });
node.append("circle")
.attr("r", function(d) { return d.funds; })
.style("fill", function(d) { return color(d.decade); });
});
</script>
</body>
and here's the csv file: 这是csv文件:
decade,scam,funds
2010s,NSEL scam,55
2010s,Railway Iron-Ore freight scam,170
2010s,Vodafone tax scam,110
2010s,Odisha Mining scam,600
2010s,DIAL Scam,1670
2010s,Tamil Nadu Granite scam,160
The pack layout is expecting a hierarchical data structure . 数据包的布局期待分层数据结构 。 So, you have to prepare the flat CSV data accordingly.
因此,您必须相应地准备平面CSV数据。
var data = { name: "decade", children: csvData };
var node = vis.data([data]).selectAll("circle")
.data(pack.nodes)
...
Here is a working PLUNK with your data and most of your original logic. 这是包含您的数据和大部分原始逻辑的有效PLUNK 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.