d3.js交互图表

Miracle 发布于2019-08-23 16:46 / 1782人阅读

摘要：如果对原生还有比较熟悉的话，的交互很快就能掌握还是拿完整的柱形图例子修改完整的柱图通过对元素进行事件绑定或移除，用法很简单，例如注意这里使用才有指向对应元素用法和原生及几乎一样给柱状图进行事件绑定这里我们使得鼠标悬浮的柱状图颜色变为中，元素

d3js v5.9.2
如果对原生JS还有Jq比较熟悉的话，d3的交互很快就能掌握
还是拿完整的柱形图例子修改：完整的柱图

selection.on()

d3通过selection.on()对元素进行事件绑定或移除，用法很简单，例如：

selection.on("click", function(){ 
    console.log(this)
})

注意这里使用function(){}才有this指向对应元素
用法和原生JS及jq几乎一样

给柱状图进行事件绑定

这里我们使得鼠标悬浮的柱状图颜色变为lightblue
svg中，元素属性的优先级为0，为方便之前的demo，这里添加class名来改变矩形的样式

.selected-rect{
    fill: lightblue
}

js代码如下

barContainer.append("rect")
    .attr("height", d => barScale(d))
    .attr("width", barWidth - 1)
    .on("mouseover", function () {
        d3.select(this) //指向元素
            .attr("class", "selected-rect"); //通过class改变样式
    })
    .on("mouseout", function () {
        d3.select(this)
            .attr("class", null);
    });

总结

很简单吧，没啥好说的，主要是一开始不了解svg样式的优先级查阅了资料，没想到优先级权重是0（翻译错了请指出
源代码

参考资料

交互式操作
Handling Events
Presentation attributes

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103271.html

常用的数据可视化工具

摘要：俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。是一个地图库，主要面向数据可视化用户。俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。 showImg...

philadelphia 2019-08-22 11:06 评论0 收藏0
14个最好的 JavaScript 数据可视化库

摘要：适用于，演示这是开发的一个简单的可视化库，它允许你创建所有常用的图表类型条形图，树形图，折线图，面积图等。可以轻松地对折线图和条形图进行混合和匹配以组合不同的数据集，这是非常棒的功能。翻译：疯狂的技术宅原文：https://www.monterail.com/blo... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章你的程序有多...

Mertens 2019-08-23 16:23 评论0 收藏0
11个React Native 组件库和 Javascript 数据可视化库

摘要：数据可视化库超过的的可能是最流行和最广泛的数据可视化库。是一组组件，用于高效地渲染大型列表和表格数据。一种优雅而灵活的方式，可以利用组件来支持实际的数据可视化。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ React Native 组件库 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...

tangr206 2019-08-23 17:11 评论0 收藏0
12个值得关注的顶级可视化JS库涉及图表、动画、时间处理，表格操作

摘要：本文是译文，原文是我在原文的基础上加了百度的图表库，这个也是毫不逊色其他图表库的。更新记录图表类数据驱动文档通常被称为最强大的开源可视化库。是迄今为止最好的图表库。在顶级功能支持，使任何元素可拖动，可旋转或可滑动滚动和快速性能的能力。本文是译文，原文是https://da-14.com/blog/top-11...我在原文的基础上加了百度的Echats图表库，这个也是毫不逊色其他图表...

JinB 2019-08-20 14:14 评论0 收藏0