基于Flask编写
既然后端数据处理使用了python，最开始的想法是通过python-flask写网页，也因此学习了flask，但是因为实际写后端的时候没有网，于是乎重新回到了自己比较熟悉的nodejs
基于Nodejs编写
网站demo：http://pikapika.mhy12345.xyz:3000
运用d3的数据图形化的库，展示词云与结构树，过程参见http://blog.mhy12345.xyz/2017/05/18/nodejs学习笔记/
词云
使用d3项目https://www.jasondavies.com/wordcloud/，由其中demo的browserify.js生成。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
var d3 = require("d3"), cloud = require("./utils/d3-cloud"); //var fill = d3.schemeCategory20(); var fill = d3.scaleOrdinal(d3.schemeCategory20); var layout = cloud() .size([500, 500]) .words( JSON.parse(document.getElementById('wordlist').innerHTML) .map(function(d) { return {text: d[0], size: 10 + d[1], test: "haha"}; })) .padding(1) .rotate(function() { return ~~((Math.random()-.5) * 7) * 20; }) .font("Impact") .fontSize(function(d) { return d.size; }) .on("end", draw); layout.start(); function draw(words) { d3.select(".svg-point").append("svg") .attr("width", layout.size()[0]) .attr("height", layout.size()[1]) .append("g") .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")") .selectAll("text") .data(words) .enter().append("text") .style("font-size", function(d) { return d.size + "px"; }) .style("font-family", "Impact") .style("fill", function(d, i) { return fill(i); }) .attr("text-anchor", "middle") .attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; }) .text(function(d) { return d.text; }); } |
结构树
结构树https://bl.ocks.org/mbostock/4063570，直接把里面的js代码搬下来就好了。当然，需要各种修改以适应这里的情况，不过这些细节就不用说了。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"), g = svg.append("g").attr("transform", "translate(300,0)"); var stratify = d3.stratify() .parentId(function(d) { return d.parentid; }); d3.csv('/tree/'+document.getElementById('infopath').innerHTML+'_t.csv', function(error, data) { if (error) throw error; var mxdepth = 0; root = stratify(data).sort(function(a, b) {return a.id - b.id; }); d3.cluster().size([height,root.height*200])(root); var link = g.selectAll(".link") .data(root.descendants().slice(1)) .enter().append("path") .attr("class", function(d){ return d.children?"link":"link-leaf";}) .attr("d", function(d) { if (!d.children) return "M" + d.y + "," + d.x + "C" + (d.parent.y + 100) + "," + d.x + " " + (d.parent.y + 100) + "," + (d.x+d.parent.x)/2 + " " + d.parent.y + "," + d.parent.x; else return "M" + d.y + "," + d.x + "C" + (d.parent.y + 100) + "," + d.x + " " + (d.parent.y + 100) + "," + d.parent.x + " " + d.parent.y + "," + d.parent.x; }); var node = g.selectAll(".node") .data(root.descendants()) .enter().append("g") .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); }) .attr("transform", function(d) { return d.children? "translate(" + d.y + "," + d.x + ")" : "translate(" + d.y + "," + d.x + ")"; }); node.append("circle") .attr("r", 2.5); node.append("text") .style('font-size',13) .attr("dy", 3) .attr("x", function(d) { return d.children ? -8 : 8; }) .style("text-anchor", function(d) { return d.children ? "end" : "start"; }) .text(function(d) {return d.data.text }); }); |