d3 vs Echarts

[LizPeng]

调研内容

兼容性

d3

• 把数据加载到浏览器的内存空间；
• 把数据绑定的到文档中的元素，根据需要创建新元素；
• 解析每个元素的范围资料（bound datum）并为其设置响应的可视化属性，实现元素的变换（transforming）
• 响应用户输入实现元素状态的过渡（transitioning）
  学习D3的过程，就是学习那些告诉它如何加载、绑定数据，变换和过渡元素的语法的过程。

业务需求

• 整体样式布局
• 展示方式
• 交互操作

[LizPeng]

d3的使用

var dataset = [[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]];
	
			//Create SVG element
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

			svg.selectAll("circle")
			   .data(dataset)
			   .enter()
			   .append("circle")
			   .attr("cx", function(d) {
			   		return d[0];
			   })
			   .attr("cy", function(d) {
			   		return d[1];
			   })
			   .attr("r", 5);