07-D3.js交互和布局

一、交互操作

对某一元素添加交互操作十分简单： 

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 秒）不算长，也不算短。
    

    鼠标事件只有在某个元素有像素被鼠标“接触到”的时候才会触发。如果两 个元素叠加在一起，鼠标经过的元素只是“上面的”那个（即离你眼睛更近 的那个）。这时候，只有上面的元素才会触发mouseover事件，下面的元素不会。
    

  • 可以使用常规的CSS选择符来选择相应的元素:
    • 

    svg text {
    pointer-event:none;

  • 分组SVG元素
    • 

    在一组视觉元素需要统一行为的情况下，这种机制相当有用。比如条形图吧，可以把 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来实现
    

    <div id="tooltip" class="hidden">
    <p><strong>Important Label Heading</strong></p>
    <p><span id="value">100</span>%</p>

    //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动画
    

  • 生成新的随机数
    • 

  • 将新值绑定到已有元素
    • 

  • 把元素过渡到与新值对应的新位置、高度、颜色
    • 

    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 似乎是为艺术家或发烧友准备的。有那么点意思，但请初学者也不要放弃。