D3学习：交互式操作

最新推荐文章于 2021-10-24 08:37:36 发布
最新推荐文章于 2021-10-24 08:37:36 发布
阅读量454 收藏 2
点赞数
分类专栏： D3 文章标签： d3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zkyrjsxdm/article/details/50403437
版权

基于柱形图的简单交互操作

最近一段时间的D3学习全部是基于http://www.ourd3js.com/wordpress/
这个网站的，版权全部归上述网站所有，我就不每次都强调一遍了。

前两天刚看了一个js讲动画的视频，今天正好用上，好开森~
内容比较好理解，直接上代码啦~

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3：交互式学习简单例子</title>
        <style type="text/css">
        .axis path,
        .axis line {
            fill:none;
            stroke:black;
            shape-rendering:crispEdges;
        }
        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }
        </style>
        <script type="text/javascript" src="../d3/d3.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
        var height = 400,
            width = 400;

        var dataset = [13, 19, 47, 89, 32, 10];

        var padding = {left:20, right:20, top:30, bottom:30};

        var svg = d3.select("body")
                    .append("svg")
                    .attr("height", height)
                    .attr("width", width);

        var xScale = d3.scale.ordinal()
                       .domain(d3.range(dataset.length))
                       .rangeRoundBands([0, width - padding.left - padding.right]);

        var yScale = d3.scale.linear()
                       .domain([0, d3.max(dataset, function (d) {return d;})])
                       .range([height - padding.top - padding.bottom, 0]);

        var xAxis = d3.svg.axis()
                      .scale(xScale)
                      .orient("bottom");

        var yAxis = d3.svg.axis()
                      .scale(yScale)
                      .orient("left");

        var rectPadding = 4;

        var rects = svg.selectAll("rect")
                       .data(dataset)
                       .enter()
                       .append("rect")
                       .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
                       .attr("x", function (d, i) {return xScale(i) + (rectPadding / 2);})
                       .attr("y", function (d) {return yScale(d);})
                       .attr("width", xScale.rangeBand() - rectPadding)
                       .attr("height", function (d) {return height - padding.top - padding.bottom - yScale(d);})
                       .style("fill","blue")
                       .on("mouseover", function (d,i) {d3.select(this).style("fill", "yellow")})
                       .on("mouseout", function (d, i) {
                        d3.select(this)
                          .transition()
                          .duration(500)
                          .style("fill", "blue");
                       });

        var texts = svg.selectAll("text")
                       .data(dataset)
                       .enter()
                       .append("text")
                       .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
                       .attr("x", function (d,i) {return xScale(i) + (rectPadding / 2);})
                       .attr("y", function (d) {return yScale(d);})
                       .attr("dx",(xScale.rangeBand() - rectPadding) / 2)
                       .attr("dy", 18)
                       .style("fill", "white")
                       .style("text-anchor", "middle")
                       .text(function (d) {return d;});



        svg.append("g")
           .attr("class", "axis")
           .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
           .call(xAxis);

        svg.append("g")
           .attr("class", "axis")
           .attr("transform","translate(" + padding.left + "," + padding.top + ")")
           .call(yAxis);
        </script>
    </body>
</html>
一只从零开始学习的小蜗牛
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
D3.js的v5版本入门教程（第十一章）——交互式操作
数星星等天明的博客
04-23 8960
D3.js的v5版本入门教程（第十一章）     与图形进行交互操作是很重要的！所谓的交互操作也就是为图形元素添加监听事件，比如说当你鼠标放在某个图形元素上面的时候，就会显示相应的文字，而当鼠标移开后，文字就会消失，或者鼠标单击一下某图形元素就会使它动起来     为了与图形元素进行交互操作，我们还是需要以下新的知识点 on("eventName",function)；该函数是添加一个监...
D3.js 交互式操作
04-14 227
与图表的交互，指在图形元素上设置一个或多个监听器，当事件发生时，做出相应的反应。 一、什么是交互 　　交互，指的是用户输入了某种指令，程序接受到指令之后必须做出某种响应。对可视化图表来说，交互能使图表更加生动，能表现更多内容。 　　例如，拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等等。 　　用户用于交互的工具一般有三种：鼠标、键盘、触屏。 ...
D3.js：交互式操作
weixin_34032779的博客
10-20 338
用户用于交互的工具一般有三种：鼠标、键盘、触屏。 1. 添加交互 对某一元素添加交互操作十分简单，代码如下： //画布大小 var width = 500, height = 500; // 在body里添加一个SVG画布 var svg = d3.select("body") .append("svg") .attr("width",width) ...
D3 交互
Claroja
04-10 342
&lt;html&gt; &lt;body&gt; &lt;script src="http://d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt; &lt;script&gt; var width = 300; //画布的宽度 var
D3入门系列(3)--简单的交互与动态
ban2413的博客
12-22 279
首先，介绍一下D3中三个非常重要的概念Update、Enter、Exit 。 如果数组为 [3, 6, 9, 12, 15]，将此数组绑定到三个 p 元素的选择集上。可以想象，会有两个数据没有元素与之对应，这时候 D3 会建立两个空的元素与数据对应，这一部分就称为Enter。而有元素与数据对应的部分称为Update。如果数组为 [3]，则会有两个元素没有数据绑定，那么没有数据绑定的...
精通D3.js：交互式数据可视化高级编程1
08-03
《精通D3.js：交互式数据可视化高级编程1》是一本深入探讨D3.js库的指南，旨在帮助读者掌握创建动态、交互式数据可视化的技能。D3.js，全称Data-Driven Documents，是一个强大的JavaScript库，专为数据驱动的Web文档...
d3-foresight:交互式可视化以进行时间序列预测
05-25
d3-foresight通过交互式界面，使得用户能够轻松探索和理解复杂的预测模型，如ARIMA、状态空间模型或者基于机器学习的方法。它支持对预测结果的多维度展示，包括但不限于趋势线、季节性、周期性和异常值等关键特征。 ...
valorum:交互式统计
06-22
"valorum:交互式统计"是一个项目，它利用AngularJS和D3.js这两个强大的JavaScript库来创建动态且用户友好的数据可视化应用。AngularJS是一款由Google维护的前端框架，主要用于构建单页应用程序（SPA），而D3.js...
prototyping-d3:交互原型挑战
06-24
D3.js（Data-Driven Documents）是一个强大的JavaScript库，专为创建数据驱动的动态和交互式图形而设计。在这个“prototyping-d3”项目中，我们将会探讨如何使用D3.js进行交互原型的构建。 首先，D3.js的核心概念是...
kmeans:交互式K均值聚类算法
03-27
在JavaScript环境中实现交互式K-Means，可以利用可视化工具，如D3.js库，来呈现数据点和聚类结果，提供用户友好的界面进行交互操作。文件名“kmeans-master”可能包含了完整的项目源代码，包括算法实现、数据处理和...
使用D3设计交互式图表
06-24
D3经典初级教程带目录版！ 共同学习，共同进步！
数据可视化实现-使用D3设计交互图表
05-29
　你手头有一些数据，想做成漂亮的图表放到网站上？好主意，通过浏览器来跨平台实现数据可视化是正确的选择。什么，你还想让图表能够响应用户操作？没问题，交互式图表比静态图片更能吸引人去探究本源。好啦，要生成通过浏览器展示的动态图表，目前热门的Web数据可视化库——D3。 　　《图灵程序设计丛书·数据可视化实战：使用D3设计交互式图表》这本书很有意思，而且对读者要求不高。不需要知道什么是数据可视化，也不用有太多Web开发背景就能看懂它。不信？翻一翻就知道这是一本既好玩又实用的动手指南啦！看完这本书你会怎么样呢？ 　　掌握必要的HTML、CSS、JavaScript和SVG基础知识； 　　学会基于数据在网页里生成元素和为它们设置样式的技巧； 　　能够生成条形图、散点图、饼图、堆叠条形图和力导向图； 　　使用平滑的过渡动画来展示数据的变化； 　　赋予图表动态交互能力，响应用户从不同角度探索数据的请求； 　　收集数据和创建自定义的地图； 　　另外，《图灵程序设计丛书·数据可视化实战：使用D3设计交互式图表》100多个代码示例都可以在线浏览！ 【电子版来自互联网，仅供预览及学习交流 使用,不可用于商业用途,如有版权问题，请联系删除,支持正版，喜欢的 请购买正版书籍: https://e.jd.com/30336473.html】
D3JS：使用d3js和Plotly进行交互式数据探索
03-04
D3JS：使用d3js和Plotly进行交互式数据探索
d3交互 （鼠标事件）
give it a try
10-23 2231
下定决心，好好过一天~ 这里我的d3是v7版本，框架使用的是vue框架。可以只看methods中写的代码即可 源代码 <template> <div id="MouseD3" width=600 height=600></div> </template> <script> import * as d3 from "d3" export default { name:"MouseD3", mounted(){ .
D3中的交互式操作
The One Who's at the Front
10-20 2657
什么是交互 交互，指的是用户输入了某种指令，程序接受到指令之后必须做出某种响应。对可视化图表来说，交互能使图表更加生动，能表现更多内容。例如，拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等。 用于用户交互的工具 鼠标、键盘、触屏 如何添加交互 来看简单交互的demo var rect = svg.append("rect"); rect.on("mouseover", f...
d3.js学习7----交互
Pitter_Patter_Bee的专栏
10-20 928
与图表的交互，指在图形元素上设置一个或多个监听器，当事件发生时，做出相应的反应。   1. 什么是交互   交互，指的是用户输入了某种指令，程序接受到指令之后必须做出某种响应。对可视化图表来说，交互能使图表更加生动，能表现更多内容。例如，拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等等。   用户用于交互的工具一般有三种：鼠标、键盘、触屏。   2. 如何添加
D3.js（四）------------交互
Missbelover的博客
12-23 700
制作柱状图的技巧 有一些基本规则： 避免使用 3D 效果； 直观地排序数据点 - 按字母顺序或按数字排序； 柱条之间保持一定距离； y 轴从 0 开始，而不是从最小值开始； 使用统一的颜色； 添加轴标签、标题、导引线。 D3.js 网格系统 在背景中添加栅格线突出那些值。 垂直和水平的线都可以添加，但是建议是只添加一种。过多的线会分散注意力。以下代码片段演示了如何添加水平和垂直的栅格。 a...
d3交互 （拖拽事件）
give it a try
10-24 1230
下定决心，好好过一天~ 这里我的d3是v7版本，框架使用的是vue框架。可以只看methods中写的代码即可 源代码 <template> <div id="DragD3" width=600 height=600></div> </template> <script> import * as d3 from "d3" export default { name:"DragD3", mounted(){ t.
D3实战：交互式Web数据可视化设计指南
该书详细介绍了如何使用D3.js这个强大的JavaScript库来创建和设计交互式的网络数据可视化图表。D3.js（Data-Driven Documents）是一个用于Web开发的数据可视化工具，它允许开发者将复杂的数据转换为动态、交互式的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值