如何为本地geojson文件绘制d3气泡图
如何为本地geojson文件绘制d3气泡图
提问于 2016-01-17 12:52:34
我想画一个d3气泡图。以d3 这个链接为例，我试图获得本地文件的气泡图，即myfile.geojson。我尝试过的代码在柱塞链接中。我想绘制一个基于价值“利润”的泡泡图。在google和youtube上尝试了所有的方法，但是我没有找到解决问题的方法。柱塞连杆
我是d3的新手。如果我在代码中有任何错误，请建议我改正。提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-01-18 01:04:22
您的数据与flare.json有很大的不同，因此复制递归代码不会使您的数据。您的数据集非常简单，不需要递归就可以将数据集夷为平地。
function classes(root) {
var classes = [];
function recurse(profit, node) {
if (node.profit) node.profit.forEach(function(child) { recurse(node.profit, child); });
else classes.push({packageName: type, className: node.profit, value: node.profit});
}
recurse(null, root);
return {features: classes};
}这应该是：
function classes(root) {
var classes = root.features.map(function(f, i) {
//here i is the index
return {
value: f.properties.profit,
className: "Hello" + i,////just giving some dummy values
packageName: i//just giving some dummy values
}
});
return classes;
}现在，将这些数据传递给如下所示的气泡布局：
var node = svg.selectAll(".node")
.data(bubble.nodes({
children: classes(root)
}).filter(function(d) {
return !d.children;
}))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});编辑
泡沫图是基于利润价值的：
圆的半径取决于您在classes function中给出的值。
return {
value: f.properties.profit,
className: "Hello" + i,////just giving some dummy values
packageName: i//just giving some dummy values
}因此，越多的值或f.properties.profit，半径就越大。半径将相对于您在这里设置的直径：
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])在d3 https://www.dashingd3js.com/d3js-scales中读取域范围
与className和packageName不同，我应该给出什么来根据利润值得到泡沫图。
这我不知道该回答什么，我认为你的概念不清楚，天真的问题也不清楚。
如果您看到代码，packageName定义颜色
.style("fill", function(d) {
return color(d.packageName);
});className定义了要在气泡中显示的文本。
.text(function(d) {
return d.className;
});请看代码在小提琴，它非常简单的理解。
工作代码这里。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34838521
复制相关文章
相似问题
腾讯云开发者
