微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

我正在尝试从json文件制作d3.js图

如何解决我正在尝试从json文件制作d3.js图

我已经尝试了好几次,但是用d3.js来创建图形却做得不好。

我将信息保存在一个json文件中,我想用它制作一个图形

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 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?