200201.md

初识d3

d3 是什么

d3 又叫 D3.js，堪称SVG中的jQuery，用 js 操作svg，当然你如果想用D3输出Canvas图也可以，但SVG图操作起来更加灵活，更加方便调试

d3 相对于 echarts 的优劣

1. 对于客户需求要求的图表拥有大量的用户交互场景，用d3比较方便，因为d3中svg画图支持事件处理器，他是基于dom进行操作的。
2. 对于大量的数据展示并且对于用户交互场景没什么要求，就只是展示数据，那我建议使用echarts，如果使用d3的话展示的每一个数据都是一个标签，那么当数据发生改变的时候这时候图表会重新渲染，会不停的操作dom，操作dom是很耗费性能的。
3. 从兼容性方面考虑：echarts兼容到IE6及以上的所有主流浏览器，而d3兼容IE9及以上以及所有的主流浏览器，如果项目考虑兼容IE6，建议使用echarts。
4. echarts 容易上手，但 d3 更加灵活，可以定制不同图形

d3 的基本操作

1. 跟 jquery 的相同点，选取元素就是实例化 d3 对象，可以进行链式操作，也可以进行对 dom 的修改

// 选取 body 中的 p 元素，然后写入 hello word
let pEle = d3.select('body').selectAll('p').text("hello word");
// 设置样式
pEle.style('color', '#f00');

2. 增加和操作 svg

// 生成svg，画出基本图形：圆
let svg = d3.select(".d3-box-svg").append("svg");
svg.attr('width', "500px");
svg.attr('height', "500px");
svg.style("border", "1px solid #cd0000");
svg.append("circle")
    .attr("cx", 60).attr("cy", 60)
    .attr('r', 50).attr('fill', "red");
// 增加文字
svg.append('text')
    .text('圆形')
    .attr("x",60).attr('y',140)
    // 文字居中
    .attr('text-anchor',"middle");