基于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生成。
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代码搬下来就好了。当然,需要各种修改以适应这里的情况,不过这些细节就不用说了。
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 }); });