事件  监听

在之前的文章中写到，为了让图表具有交互能力，我们必须针对一些事件来编写代码，以便监听某些DOM元素发生的这些事件。

D3中, on() 方法对于绑定D3元素集非常方便。

通常情况下，我们会一次性为多个元素绑定事件监听器，所要改变的只是将select()换成选择多个元素的selectAll()，再把选择的元素集交给on()即可。

这里我们以柱状图为例，

svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   .attr({
        x:function(d,i){return i* (w/dataset.length);},
        y:function(d){return h-(d*4);},
            width: w/dataset.length - barPadding,
            height: function(d){return d*4;},
            fill: function(d){return "rgb(0,0,"+(d*10)+")";}
    .on("click",function(d){
       //任何条形被单击，都会执行该代码
            console.log(d);//点击条形，在控制台查看输出
    });

悬停高亮

简单的悬停高亮使用CSS3就能实现，例如在条形图上悬停高亮：

rect {
    -moz-transition: all .3s;
     -o-transition:all .3s;
     -webkit-transition: all .3s;
     transition: all .3s;
rect:hover {
     fill:orange;
}

但是，既然D3中也能这么做，即绑定mouseover和mouseout事件。你还可以根据上节学到加入过渡效果。

.on("mouseover",function(d){
     d3.select(this) //在传给任何D3方法的匿名函数中，如果想操作当前元素，只要引用this就行
       .transition(300)
       .attr("fill","orange");
       .on("mouseout",function(d){
          d3.select(this)
            .transition(300)
            .attr("fill","rgb(0,0,"+(d*10)+")");
  }

但是，你是否注意到，但你将鼠标移到标签上时，不会发生高亮效果。就是说，标签"挡住"了mouseover这个事件的发生。为了不被标签影响，可以给标签( svg text元素)添加规则:

svg text　｛pointer-event:none;｝

或者在D3创建标签的时候设置CSS属性：

svg.selectAll("text")
   .data(dataset)
   .enter()
   .append('text')
   .style("pointer-events","none")  //<---添加的属性
   .text(function(d){
      return d;
   .attr({
      x:function(d,i) {
          return i * (w/dataset.length)+40;
      y:function(d){return h-(d*4)+14;},
         fill:"red",
 });

#排序

仍以条形图为例，给每个条形添加一个click事件监听器，在这个匿名函数中调用我们新定义的一个函数sortBars()，然后利用D3提供的sort()函数进行排序。

这里需要注意的是，单击条形图时，会触发一次过渡，而鼠标悬停又会触发另一次过渡。为了运行鼠标悬停的高亮过渡，原来正在运行的过渡就会中断。所以，为了避免中断，这里的悬停我们使用了CSS3的方式。

var sortBars = function() {
    sortOrder = !sortOrder;
    // 选择所有rect元素，使用D3提供的sort()方法，排序依据是绑定到它们的数据值
      svg.selectAll("rect")
        .sort(function(a,b){
             if(sortOrder){
                return d3.ascending(a,b);//比较函数接受来自两个不同元素的数据值，针对数组中每一对元素都被调用一次，然后它比较a和b，知道所有数组元素都按我们指定的规则排序完毕
             }else {
                 return d3.descending(a,b);//降序
        .transition()
        .duration(1000)
        .delay(function(d,i){return i*10;})
        .attr({
        x:function(d,i){return i* (w/dataset.length);},
        y:function(d){return h-(d*4);}
        svg.selectAll("text")
           .sort(function(a,b){
             if(sortOrder){
                return d3.ascending(a,b);
            }else {
               return d3.descending(a,b);
        .transition()
        .duration(1000)
        .delay(function(d,i){return i*10;})
        .attr({
            x:function(d,i) {
                 return i * (w/dataset.length)+40;
            y:function(d){return h-(d*4)+14;},
                 fill:"red",
  };

#提示条

1】添加title

.append(“title”)

.text(function(d){return d;}) //在添加rect或者其他图形时候添加title，当鼠标悬停在图形上方，自然会有浏览器自带的提示

2】 SVG提示条

利用mouseover()事件监听，动态创建值标签，而在mouseout发生时，将值标签删除。不大推荐该方式。

3】HTML的DIV提示条

类似于SVG，只是它能做的更美观

例如，我们再页面中初始化一个html提示条

<div id="tooltip" class="hidden">
    <p><strong>This Value is:</strong></p>
    <p><span id="tooltip_value">100</span></p>
</div>

然后利用d3的mouseover与mouseout对id="tooltip"进行控制。

附完整代码

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div.bar {
            display: inline-block;
            width: 20px;
            height: 75px;
            margin-right: 2px;
            background-color: teal;
        rect {
          -moz-transition: all .3s;
          -o-transition:all .3s;
          -webkit-transition: all .3s;
          transition: all .3s;
        rect:hover {
          fill:orange;
        #tooltip {
            
            width: 150px;
            height: auto;
            padding:5px;
            background-color: white;
            border:1px solid #ccc;
            -webkit-border-radius:10px;
            -moz-border-radius:10px;
            border-radius: 10px;font-style: 
            -webkit-box-shadow:4px 4px 10px rbga(0,0,0,0.4);
            -moz-box-shadow:4px 4px 10px rbga(0,0,0,0.4);
            box-shadow:4px 4px 10px rbga(0,0,0,0.4);
            pointer-events: none;
        #tooltip.hidden{display: none;}
        #tooltip p {
            margin:0;
            font-family: sans-serif;
            font-size: 16px;
            line-height: 20px;
    </style>
</head>
    <div id="tooltip" class="hidden">
        <p><strong>This Value is:</strong></p>
        <p><span id="tooltip_value">100</span></p>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://d3js.org/d3.v3.js"></script>
    <script type="text/javascript">
        let w = 500;
       let h = 100;
       let padding = 30;
       let barPadding =10;
       let sortOrder = false;
       let svg = d3.select("body").append("svg").attr("width",w).attr("height",h);//把append()返回的新元素保存在了变量svg中
       let dataset = [5,10,6,3,25];
       svg.selectAll("rect")
           .data(dataset)
           .enter()
           .append("rect")
           .attr({
            x:function(d,i){return i* (w/dataset.length);},
            y:function(d){return h-(d*4);},
            width: w/dataset.length - barPadding,
            height: function(d){return d*4;},
            fill: function(d){return "rgb(0,0,"+(d*10)+")";}
            .on("mouseover",function(d){
                //设置提示条的x,y坐标
                let xPosition = parseFloat(d3.select(this).attr("x"));
                let yPosition = parseFloat(d3.select(this).attr("y"));
                //更新提示条位置和值
                d3.select("#tooltip")
                  .style("left",xPosition+"px")
                  .style("top",yPosition+"px")
                  .select("#tooltip_value")
                  .text(d);
                  //显示提示条
                d3.select("#tooltip").classed("hidden",false);
            .on("mouseout",function(){
                //隐藏提示条
                d3.select("#tooltip").classed("hidden",true);
            .on("click",function(){
               sortBars();//调用排序
       svg.selectAll("text")
        .data(dataset)
        .enter()
        .append('text')
        .style("pointer-events","none")
        .text(function(d){
            return d;
        .attr({
            x:function(d,i) {
                return i * (w/dataset.length)+40;
            y:function(d){return h-(d*4)+14;},
            fill:"red",
        var sortBars = function() {
            sortOrder = !sortOrder;
            // 选择所有rect元素，使用D3提供的sort()方法，排序依据是绑定到它们的数据值
            svg.selectAll("rect")
               .sort(function(a,b){
                    if(sortOrder){
                        return d3.ascending(a,b);//比较函数接受来自两个不同元素的数据值，针对数组中每一对元素都被调用一次，然后它比较a和b，知道所有数组元素都按我们指定的规则排序完毕
                    }else {
                        return d3.descending(a,b);//降序
               .transition()
               .duration(1000)
               .delay(function(d,i){return i*10;})
               .attr({
                x:function(d,i){return i* (w/dataset.length);},
                y:function(d){return h-(d*4);}
            svg.selectAll("text")
               .sort(function(a,b){
                    if(sortOrder){
                        return d3.ascending(a,b);
                    }else {
                        return d3.descending(a,b);
               .transition()
               .duration(1000)
               .delay(function(d,i){return i*10;})
               .attr({
                    x:function(d,i) {
                        return i * (w/dataset.length)+40;
                    y:function(d){return h-(d*4)+14;},
                    fill:"red",
    </script>
</body>
</html>

封装库/工具库中重要概念之动画

前端开发中，动画是一个非常重要的技术特性。它可以提升用户体验，增加页面交互性，并且让网站看起来更加生动活泼。然而，在实现复杂动画时，手写代码往往会变得繁琐且容易出错。因此，前端工具库和封装库的出现为我们提供了便利。在本文中，我们将探讨前端中的封装库和工具库以及它们在实现动画效果方面的作用。

这里我又联想到了商城的购物车的场景，体验确实有提升。刚开始，我怀疑的是Web Socket作妖，结果通过分析网络请求和看源码，并没有。最后发现是localStore的storage事件作妖，哈哈。回归正题，其实在一般正常的知识储备的情况下，我们会想到哪些方案呢？ C#使用Xamarin开发可移植移动应用(4.进阶篇MVVM双向绑定和命令绑定)附源码

原文:C#使用Xamarin开发可移植移动应用(4.进阶篇MVVM双向绑定和命令绑定)附源码 C#使用Xamarin开发可移植移动应用目录源码地址:https://github.

事件 监听

悬停高亮

附完整代码

事件监听