最新消息:20210917 已从crifan.com换到crifan.org

[记录]继续折腾 D3 可视化:把自己的wordpress网站crifan.org的分类可视化

WordPress crifan 429浏览 0评论
参考:
Radial Reingold–Tilford Tree – bl.ocks.org
ArchitectureTree Demo
然后自己去试试,也是可以的:
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.org”,
 “url” : “https://www.crifan.org”,
 “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}
     ]
    }
    ]
  }
 ]
}
然后访问:
https://crifan.org/d3/RadialTree/
可以得到最基本的效果了:
-》
就是:
分类的内容,太少了
-》但是又不想要去:手动的,把几十个,几百个,分类,一点点的手写
-》所以想要去:
[记录]用Python把Wordpress网站crifan.org的分类爬下来导出为JSON格式

转载请注明:在路上 » [记录]继续折腾 D3 可视化:把自己的wordpress网站crifan.org的分类可视化

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
100 queries in 0.193 seconds, using 23.36MB memory