[Pikapika]科技文献的脉络梳理-网页展示的编写

基于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 });
});