如果用 D3 来构建一个简单的散点图，我们需要创建一些圆点（circle）来展示你的数据。当你发现 D3 并没有提供内置的方法来同时创建多个 DOM 元素时，也许你会感到惊讶，但是，等等，为什么呢？
more
当然，你可以使用 append 方法来创建单个元素：
js
svg.append("circle")
.attr("cx", d.x)
.attr("cy", d.y)
.attr("r", 2.5);
这仅仅是一个圆点，我们需要的是一系列圆点，每个圆点代表一条数据。当然你可以用 for 循环来创建，但开始之前，请看看下面官方例子中的代码：
js
svg.selectAll("circle")
继续阅读 »
D3.js 是一个用来做数据展示的库，可以用它来封装一些成一些基础的数据展示组件，也可以从中学习到 SVG 的知识。现在我们就来学习 D3 吧！
Baisc Methods
select() 选择一个区域，进行我们的工作
append() 为这个区域添加一个标签
text 为这个标签添加文本内容
attr() 为添加的标签添加属性
继续阅读 »
因为最近手上有个小的需求，设计一个可缩放和可拖拽的树形结构，我便去研读了D3官网给的一个树形的例子。
布局（Layout）
原本我以为理解了基本的选择器、元素操作、Enter、Exit就能去看实例的代码了，后来发现我错了，所以这里需要理解一下D3中布局（Layout）的概念。布局是D3中一个十分重要的概念，从布局衍生出很多图表。例如：饼状图（pie）、力导向图（force），树状图（tree）等等，基本实现了很多开源的可视化工具提供的图表。但是它又和很多可视化工具（如Echarts）有很大的不同。
相对于其它工具来说，D3较底层一点，所以初学者可能会觉得有点困难，但是一旦理解了D3布局的思想，使用起来，会比其它工具更加得心应手
继续阅读 »
事件
在d3入门系列文章中我们介绍过d3选择器，其中有提到选择器为交互添加或移除事件监听器的方法selection.on，除了选择器事件外，D3还提供了很多种事件机制，本节我们详细介绍下d3的事件机制
选择器事件
添加事件监听
跟jQuery类似的方法监听事件，传递参数为当前数据d和索引i;
如果所选择的元素相同类型的一个事件监听已经注册了，新的监听替换老的；
selection.on('click',function(d,i){
….
});
为相同事件类型注册多个监听器，该类型可以跟一个可选的命名空间，如“click.foo”和“click.bar”。
selection.on('click.foo',fu
继续阅读 »
首先，我们先看一下最终的柱状图效果展示。如下图所示，一个完整的柱状图需要包含三个部分：矩形、文字、坐标轴。
添加SVG画布
```js
// 画布大小
var width = 400,
height = 400;
// 画布四个方向上的留白
var margin = {
top: 20,
right: 30,
bottom: 20,
left: 30
};
var chart = d3.select('.chart')
.attr('width', width)
.attr('height', height)
.append('g');
```
定义比例尺
js
// define x
继续阅读 »
初识D3
D3是指数据驱动文档（Data-Driven Documents），根据D3的官方定义：
D3.js是一个JavaScript库，它可以通过数据来操作文档。D3可以通过使用HTML、SVG和CSS把数据鲜活形象地展现出来。D3严格遵循Web标准，因而可以让你的程序轻松兼容现代主流浏览器并避免对特定框架的依赖。同时，它提供了强大的可视化组件，可以让使用者以数据驱动的方式去操作DOM。----D3维基（2013年8月）
从一个Hello Wordld示例来看看d3如何运行 点击查看在线DEMO
```javascript
function render(data){
var demo = d3.select('b
继续阅读 »
简介
D3.js（后面简称D3，官方首页https://d3js.org/）是基于JavaScript开发的一套用于数据可视化工具，项目开源在GitHub，项目排名靠前。它提供了很多API，如DOM（Document Object Model）的一些操作，绘制图形等。截止本文发表时间，D3已更新到v4，v4在v3的基础上，有了很大的改变（因为v3只支持通过svg和dom构图，所以v4在v3的基础上增加了对Canvas的支持以及API的修改）,本文使用的版本为v3的API。
Hello World
html
D3.js Hello World
继续阅读 »