d3.js——给柱形图添加事件出现的问题总结

2021-06-15 19:05

阅读：390

YPE html>

标签：round char 不同 end html orm isp min 事先

首先做出一个动态的柱形图（这儿用的d3.js的版本是v3，用v4的话有些函数会发生变化）

效果图：

技术分享

代码：

histogramTransitionEvent

现在像个这个动态的柱形图添加mouseover和mouseout事件。

做法：

1.去掉style样式中的.MyText类，直接在添加矩形的时候添加颜色属性

2.在添加矩形的时候添加事件

...

//添加矩形和文字元素
    var rectPadding = 4;
    var rects = svg.selectAll(".MyRect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class","MyRect")
        .attr("transform","translate("+padding.left+","+padding.top+")")
        .attr("x",function(d,i){
            return xScale(i)+rectPadding/2;
        })
        .attr("width",xScale.rangeBand()-rectPadding)
        
        .attr("y",function(d){
            var min = yScale.domain()[0];
            return yScale(min);
        })
        .attr("height", function(d){
            return 0;
        })
        .transition()
        .delay(function(d,i){
            return i * 200;
        })
        .duration(2000)
        .ease("bounce")
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("height",function(d){
            return height-padding.top-padding.bottom-yScale(d);
        })
        .attr("fill","steelblue")
        //添加事件
        .on("mouseover",function(d,i){
            d3.select(this)
                .attr("fill","yellow");
        })
        .on("mouseout",function(d,i){
            d3.select(this)
                .transition()
                .duration(500)
                .attr("fill","steelblue");
        });

...

但是这样会报错，会显示on不是一个函数

后来知道应该把on事件放在transition()之前，但是为啥这么做可以现在还不知道

 ...

//添加矩形和文字元素
    var rectPadding = 4;
    var rects = svg.selectAll(".MyRect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class","MyRect")
        .attr("transform","translate("+padding.left+","+padding.top+")")
        .attr("x",function(d,i){
            return xScale(i)+rectPadding/2;
        })
        .attr("width",xScale.rangeBand()-rectPadding)
        //添加事件在 transition()之前
        .on("mouseover",function(d,i){
            d3.select(this)
                .attr("fill","yellow");
        })
        .on("mouseout",function(d,i){
            d3.select(this)
                .transition()
                .duration(500)
                .attr("fill","steelblue");
        })
        .attr("y",function(d){
            var min = yScale.domain()[0];
            return yScale(min);
        })
        .attr("height", function(d){
            return 0;
        })
        .transition()
        .delay(function(d,i){
            return i * 200;
        })
        .duration(2000)
        .ease("bounce")
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("height",function(d){
            return height-padding.top-padding.bottom-yScale(d);
        })
        .attr("fill","steelblue");

...

最终效果图：

技术分享

这里面矩形图的教程来源：http://d3.decembercafe.org/pages/lessons/9.html

d3.js——给柱形图添加事件出现的问题总结

标签：round char 不同 end html orm isp min 事先

原文地址：http://www.cnblogs.com/weiyangoo/p/7273732.html

上一篇：View视图传json格式数据到Js

下一篇：php curl请求https 返回无结果|false|errno:35

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：d3.js——给柱形图添加事件出现的问题总结
文章链接：http://soscw.com/index.php/essay/94255.html

亲，登录后才可以留言！

d3.js——给柱形图添加事件出现的问题总结

评论

热门文章

推荐文章

最新文章

置顶文章