一、交互操作
对某一元素添加交互操作十分简单：
var circle = svg.append('circle');
circle.on('click',function(){
//在这里添加交互的操作
})
在D3 中，每一个选择集都有 on() 函数，用于添加事件监听器。
鼠标常用的事件有：
- click：鼠标单击某元素时，相当于 mousedown 和 mouseup 组合在一起。
- mouseover：光标放在某元素上。
- mouseout：光标从某元素上移出来时。
- mousemove：鼠标被移动的时候。
- mousedown：鼠标按钮被按下。
- mouseup：鼠标按钮被松开。
- dblclick：鼠标双击。
- 在柱状图添加鼠标移入移出事件
注意：柱状图之前添加的样式，不要写在CSS中
.on('mouseover', function (d, i) {
d3.select(this)
.style('fill', 'steelblue')
})
.on('mouseout',function(d,i){
d3.select(this)
.transition()
.duration(500)
.style('fill','yellowgreen')
})
根据经验，细微的界面 反馈（比如鼠标悬停在元素上触发过渡），过渡时间大约 150 毫秒比较合适，而更显 著的视觉过渡（比如整个数据视图的变化）持续 1000 毫秒比较理想。1000 毫秒（1 秒）不算长，也不算短。
效果图.gif
- 指针事件和重叠元素
鼠标事件只有在某个元素有像素被鼠标“接触到”的时候才会触发。如果两 个元素叠加在一起，鼠标经过的元素只是“上面的”那个（即离你眼睛更近 的那个）。这时候，只有上面的元素才会触发mouseover事件，下面的元素不会。
- 可以使用常规的CSS选择符来选择相应的元素:
svg text {
pointer-event:none;
}
- 分组SVG元素
在一组视觉元素需要统一行为的情况下，这种机制相当有用。比如条形图吧，可以把 rect 和 text 元素分别放在各自的组里，原来元素的层次如下所示：
svg
rect
rect
rect
...
text
text
text
...
分组之后，就变成了这样：
svg
g
rect
text
g
rect
text
...
不用再担心什么指针事件，也不用管什么元素在上面，只要给整个组绑定事件监听器即可。这样，无论单击 rect 还是单击 text，都会触发相同的代码，因为它们在一个组里。
交互式图表真正的强大之处，体现在能够展示数据的不同视图，吸引用户从不同角度来探索数据中蕴藏的奥秘。
对数据进行排序是非常重要的一种功能。而且正如你所料，D3 让排序元素变得异常简单。
仍以条形图为例，我们接下来给每个条形添加一个 click 事件监听器，在这个匿名函数中调用我们新定义的一个函数 sortBars()：
.on("click",function(){
sortBars();
})
单 击 调 用 sortBars() 时， 首 先 会 选 择 所 有 rect 元 素。 然 后 使 用 D3 提 供 的sort() 方法对它们进行排序，排序依据是绑定到它们的数据值。sort() 需要知道哪个元素排在前面，哪个元素排在后面，所以我们就传给了它一个比较函数。
//Define sort function
var sortBars = function() {
svg.selectAll("rect")
.sort(function(a, b) {
return d3.ascending(a, b);
})
.transition()
.duration(1000)
.attr("x", function(d, i) {
return xScale(i);
});
};
之前介绍过新过渡效果会打断和覆盖旧过渡效果。单击条形会触发一次过渡，而随后的鼠标悬停又会触发另一次过渡。为了运行鼠标悬停的高亮过渡， 原来正在运行的过渡就会中断。结果就是那些被鼠标悬停过的条形永远不会到达它们的目标位置。
所以说，悬停效果最好还是交给 CSS 打理，而那些视觉变化更密集的操作可以交给 D3 和 JavaScript
rect:hover {
fill: orange;
}
//Width and height
var w = 600;
var h = 250;
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0, w])
.paddingInner(0.05);
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, h]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create bars
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d);
})
.attr("width", xScale.bandwidth())
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + Math.round(d * 10) + ")";
})
.on("click", function() {
sortBars();
});
//Create labels
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return xScale(i) + xScale.bandwidth() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
//Define sort order flag
var sortOrder = false;
//Define sort function
var sortBars = function() {
//Flip value of sortOrder
sortOrder = !sortOrder;
svg.selectAll("rect")
.sort(function(a, b) {
if (sortOrder) {
return d3.ascending(a, b);
} else {
return d3.descending(a, b);
}
})
.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(1000)
.attr("x", function(d, i) {
return xScale(i);
});
};
- DIV提示条
当提示条要超出SVG图形的边界时，则只能通过创建DIV来实现
tooltip.png
<div id="tooltip" class="hidden">
<p><strong>Important Label Heading</strong></p>
<p><span id="value">100</span>%</p>
</div>
//Width and height
var w = 600;
var h = 250;
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0, w])
.paddingInner(0.05);
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, h]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create bars
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d);
})
.attr("width", xScale.bandwidth())
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + Math.round(d * 10) + ")";
})
.on("mouseover", function(d) {
// 取得条形的 x/y 值，增大后作为提示条的坐标
var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.bandwidth() / 2;
var yPosition = parseFloat(d3.select(this).attr("y")) / 2 + h / 2;
// 更新提示条的位置和值
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#value")
.text(d);
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function() {
//Hide the tooltip
d3.select("#tooltip").classed("hidden", true);
})
.on("click", function() {
sortBars();
});
//Define sort order flag
var sortOrder = false;
//Define sort function
var sortBars = function() {
//Flip value of sortOrder
sortOrder = !sortOrder;
svg.selectAll("rect")
.sort(function(a, b) {
if (sortOrder) {
return d3.ascending(a, b);
} else {
return d3.descending(a, b);
}
})
.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(1000)
.attr("x", function(d, i) {
return xScale(i);
});
};
- 鼠标点击时，更新图表
结合D3动画
- 生成新的随机数
- 将新值绑定到已有元素
- 把元素过渡到与新值对应的新位置、高度、颜色
更新柱状图.gif
<p>点击更新柱状图</p>
let [w, h] = [600, 250];
let paddingTop = 20
var dataset = [5, 1, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25];
let xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0, w])
.paddingInner(0.05)
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, h - paddingTop])
var svg = d3.select("body")
.append("svg")
.attr('width', w)
.attr('height', h)
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function (d, i) {
return xScale(i)
})
.attr("y", function (d) {
return h - yScale(d)
})
.attr('width', xScale.bandwidth())
.attr('height', function (d) {
return yScale(d)
})
.attr("fill", function (d) {
return `rgb(0,0,${Math.round(d * 10)})`
})
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function (d) {
return d
})
.attr("text-anchor", "middle")
.attr("x", function (d, i) {
return xScale(i) + xScale.bandwidth() / 2
})
.attr("y", function (d) {
return h - 2 - yScale(d)
})
.attr("font-size", "12px")
.attr("fill", "#000")
d3.select("p")
.on("click", function () {
let numValues = dataset.length;
var maxValue = 100;
dataset = [];
for (let i = 0; i < numValues; i++) {
dataset.push(Math.floor(Math.random() * maxValue))
}
console.log(`dataset`, dataset)
yScale.domain([0, d3.max(dataset)])
svg.selectAll("rect")
.data(dataset)
.transition()
.delay(function (d, i) {
return i / dataset.length * 1000
})
.attr("y", function (d) {
return h - yScale(d)
})
.attr("height", function (d) {
return yScale(d)
})
.attr("fill", function (d) {
return `rgb(0,0,${Math.round(d * (255 / maxValue))})`
})
svg.selectAll("text")
.data(dataset)
.transition()
.delay(function (d, i) {
return i / dataset.length * 1000
})
.text(function (d) {
return d
})
.attr("x", function (d, i) {
return xScale(i) + xScale.bandwidth() / 2
})
.attr('y', function (d) {
return h - 2 - yScale(d)
})
})
二、布局
D3 与其它很多可视化工具不同，相对来说较底层，对初学者来说不太方便，但是一旦掌握了，就比其他工具更加得心应手。
- 对比
大部分的数据可视化工具：数据 => 绘图函数 => 图表
D3.js: 数据 => 布局 => 获得绘图所需数据 => 在画布上添加相应的图形 => 图表
可以看到，D3 的步骤相对来说较多。坏处是对初学者不方便、也不好理解。好处是能够制作出更加精密的图形。因此，我们可以据此定义什么时候选择 D3 比较好：
选择 D3：如果希望开发脑海中任意想象到的图表。
选择 Highcharts、Echarts等：如果希望开发几种固定种类的、十分大众化的图表。
看起来，D3 似乎是为艺术家或发烧友准备的。有那么点意思，但请初学者也不要放弃。
- 布局分类
D3 总共提供了 12 个布局：饼状图（Pie）、力导向图（Force）、弦图（Chord）、树状图（Tree）、集群图（Cluster）、捆图（Bundle）、打包图（Pack）、直方图（Histogram）、分区图（Partition）、堆栈图（Stack）、矩阵树图（Treemap）、层级图（Hierarchy）。
12 个布局中，层级图（Hierarchy）不能直接使用。集群图、打包图、分区图、树状图、矩阵树图是由层级图扩展来的。如此一来，能够使用的布局是 11 个（有 5 个是由层级图扩展而来）。
