gpt4 book ai didi

javascript - D3 - 无法从 csv 获取压缩圆圈

转载 作者:行者123 更新时间:2023-11-30 17:29:30 25 4
gpt4 key购买 nike

我无法让这个看似简单的代码工作。我有一个包含 5 行数据的 csv 文件,并试图从中创建一个气泡图!如果有人能提供帮助,我将不胜感激!

<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>

这是 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

最佳答案

包装布局需要 hierarchical data structure .因此,您必须相应地准备平面 CSV 数据。

var data = { name: "decade", children: csvData };

var node = vis.data([data]).selectAll("circle")
.data(pack.nodes)
...

这是一个有效的 PLUNK使用您的数据和大部分原始逻辑。

关于javascript - D3 - 无法从 csv 获取压缩圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23447398/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com