如何解决我正在尝试从json文件制作d3.js图
我已经尝试了好几次,但是用d3.js来创建图形却做得不好。
json文件
[[“ Google.com”,64],[“ naver.com”,60],[ “ daum.net”,40],[“ swu.ac.kr”,39],[ “ observablehq.com”,16],[“ stackoverflow.com”,12],[ “ tistory.com”,8],[“ youth.go.kr”,8],[“ zoom.us”, 7],[“ stackoverrun.com”,5]]
这是我的d3.js图形代码
dataset = {
"children": [
{"Name":{{domain_list[0]}},"Count":{{count_list[0]}}},{"Name":{{domain_list[1]}},"Count":{{count_list[1]}}},{"Name":{{domain_list[2]}},"Count":{{count_list[2]}}},{"Name":{{domain_list[3]}},"Count":{{count_list[3]}}},{"Name":{{domain_list[4]}},"Count":{{count_list[4]}}},{"Name":{{domain_list[5]}},"Count":{{count_list[5]}}},{"Name":{{domain_list[6]}},"Count":{{count_list[6]}}},{"Name":{{domain_list[7]}},"Count":{{count_list[7]}}},{"Name":{{domain_list[8]}},"Count":{{count_list[8]}}},{"Name":{{domain_list[9]}},"Count":{{count_list[9]}}}]};
var diameter = 800;
var format = d3.format(",d"),color = d3.scaleOrdinal(d3.schemeSet3)
var bubble = d3.pack(dataset)
.size([diameter,diameter])
.padding(1.5);
var svg = d3.select("body")
.append("svg")
.attr("width",diameter)
.attr("height",diameter)
.attr("class","bubble");
var nodes = d3.hierarchy(dataset)
.sum(function(d) { return d.Count; });
var node = svg.selectAll(".node")
.data(bubble(nodes).descendants())
.enter()
.filter(function(d){
return !d.children
})
.append("g")
.attr("class","node")
.attr("transform",function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
node.append("title")
.text(function(d) {
return d.Name + ": " + d.Count;
});
node.append("circle")
.attr("r",function(d) {
return d.r;
})
.style("fill",function(d,i) {
return color(i);
});
node.append("text")
.attr("dy",".2em")
.style("text-anchor","middle")
.text(function(d) {
return d.data.Name.substring(0,d.r / 3);
})
.attr("font-family","sans-serif")
.attr("font-size",function(d){
return d.r/5;
})
.attr("fill","black");
node.append("text")
.attr("dy","1.3em")
.style("text-anchor","middle")
.text(function(d) {
return d.data.Count;
})
.attr("font-family","Gill Sans","Gill Sans MT")
.attr("font-size","black");
d3.select(self.frameElement)
.style("height",diameter + "px");
如何将json数据传递到d3.js图形代码
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。