07-D3.js交互和布局

作者: learninginto | 来源:发表于2021-10-28 10:01 被阅读0次

一、交互操作

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

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 个是由层级图扩展而来）。

07-D3.js交互和布局

一、交互操作

二、布局

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读