参考:
然后自己去试试,也是可以的:
index.html
<!DOCTYPE html> <meta charset=”utf-8″> <style> .node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px; } .node { font: 10px sans-serif; } .link { fill: none; stroke: #ccc; stroke-width: 1.5px; } </style> <body> <script src=”https://d3js.org/d3.v3.min.js”></script> <script> var diameter = 960; var tree = d3.layout.tree() .size([360, diameter / 2 – 120]) .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; }); var diagonal = d3.svg.diagonal.radial() .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; }); var svg = d3.select(“body”).append(“svg”) .attr(“width”, diameter) .attr(“height”, diameter – 150) .append(“g”) .attr(“transform”, “translate(” + diameter / 2 + “,” + diameter / 2 + “)”); d3.json(“crifanCategories.json”, function(error, root) { if (error) throw error; var nodes = tree.nodes(root), links = tree.links(nodes); var link = svg.selectAll(“.link”) .data(links) .enter().append(“path”) .attr(“class”, “link”) .attr(“d”, diagonal); var node = svg.selectAll(“.node”) .data(nodes) .enter().append(“g”) .attr(“class”, “node”) .attr(“transform”, function(d) { return “rotate(” + (d.x – 90) + “)translate(” + d.y + “)”; }) node.append(“circle”) .attr(“r”, 4.5); node.append(“text”) .attr(“dy”, “.31em”) .attr(“text-anchor”, function(d) { return d.x < 180 ? “start” : “end”; }) .attr(“transform”, function(d) { return d.x < 180 ? “translate(8)” : “rotate(180)translate(-8)”; }) .text(function(d) { return d.name; }); }); d3.select(self.frameElement).style(“height”, diameter – 150 + “px”); </script> |
crifanCategories.json
{ “name”: “crifan.com”, “url” : “https://www.crifan.com”, “children”: [ { “name”: “Uncategorized”, “size” : 11 }, { “name”: “工作和技术”, “size” : 3894, “children”: [ { “name”: “CharEncoding”, “size” : 4, “children”: [ {“name”: “Unicode”, “size”: 1} ] }, { “name”: “CodeShare”, “children”: [ ] }, { “name”: “CompilerLinkerParser”, “size” : 94, “children”: [ {“name”: “ANTLR”, “size”: 92}, {“name”: “JavaCC”, “size”: 1} ] } ] } ] } |
然后访问:
可以得到最基本的效果了:
-》
就是:
分类的内容,太少了
-》但是又不想要去:手动的,把几十个,几百个,分类,一点点的手写
-》所以想要去:
[记录]用Python把Wordpress网站crifan.com的分类爬下来导出为JSON格式