D3.js的V5版本-Vue框架中使用(第六章) ---交互式操作

最新推荐文章于 2024-08-24 07:28:39 发布
最新推荐文章于 2024-08-24 07:28:39 发布
阅读量3k 收藏 1
点赞数 1
分类专栏： d3 文章标签： d3-v5-vue d3 d3-vue d3-v5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/davidPan1234/article/details/80735290
版权

一. Api使用

on("eventName",function)；该函数是添加一个监听事件，它的第一个参数是事件类型，第二个参数是响应事件的内容

d3.select(this), 选择当前元素

   常见的事件类型

  • click：鼠标单击某元素时触发，相当于mousedown和mouseup的组合
  • mouseover：鼠标放在某元素上触发
  • mouseout：鼠标移出某元素时触发
  • mousemove：鼠标移动时触发
  • mousedown：鼠标按钮被按下时触发
  • mouseup：鼠标按钮被松开时触发
  • dblclick：鼠标双击时触发

当然还有很多，上面列出来的只是关于鼠标监听事件，还有键盘等的监听事件，在这里就不多讲了

二.Vue使用


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  空谷足音 -จุ
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
D3.js的V5版本-Vue框架中使用(第四章) ---简单的图表使用

				
			

			

				

					空谷足音的博客
				

				

					06-15
					
					918
					
				

			

		

		

			
				

<template lang='pug'>
    div.histogram-pane(:id="id")
        svg
</template>

<script>
import * as d3 from 'd3'
export default {
    name: '',
    data () {
        return {
     ...

			
		

	



                

            
              



	

		

			

				
					
D3.js的V5版本-Vue框架中使用(第二章) ---元素及操作、Update、Enter、Exit

				
			

			

				

					空谷足音的博客
				

				

					06-15
					
					811
					
				

			

		

		

			
				
1、选择元素   在D3.js中，选择元素的函数有两个d3.select() d3.selectAll()         这两个函数返回的就是选择集常见的用法如下：let svg = body.select("svg");//选择body中的svg元素  let p = body.selectAll("p");//选择body中所有的p元素  2、元素操作name为元素名称； before:cs...

			
		

	



              


  
              

                


	

		

			

				
					
Vue-D3 开源项目安装与使用指南

					
最新发布

				
			

			

				

					gitblog_00745的博客
				

				

					08-24
					
					309
					
				

			

		

		

			
				
Vue-D3 开源项目安装与使用指南
项目地址:https://gitcode.com/gh_mirrors/vu/vue-d3
本指南旨在帮助开发者快速了解并上手 Vue-D3 这一开源项目。Vue-D3 结合了 Vue.js 的强大模板系统和 D3.js 强大的数据可视化能力，旨在简化在 Vue 应用中创建复杂数据可视化的流程。下面将分别介绍其目录结构、启动文件以及配置文件。
1. 项目目录结...

			
		

	





	

		

			

				
					
D3.js的v5版本入门教程（第六章）——做一个简单的图表

					
热门推荐

				
			

			

				

					数星星等天明的博客
				

				

					04-22
					
					1万+
					
				

			

		

		

			
				
D3.js的v5版本入门教程（第六章）

    

    从这一章开始，进入正式的d3,js绘图阶段，有了前面几章基本知识的积累，这样看接下来的绘图代码才不会觉得比较辛苦

    做一个简单的图表

    为了做一个简单的图表，我们还是需要以下新的知识点

svg画布：svg绘制的是矢量图（还有canvas画布，这个是JavaScript用来绘制2D图像的，是位图）
	rect元素：是d3...

			
		

	



		

			
		



	

		

			

				
					
vue结合D3.js做的动态的可交互的SVG图形组件

				
			

			

				

					03-06
				

			

		

		

			
				
vue结合D3.js做的动态的可交互的SVG图形组件。
下面是其中的几行代码：
data: {
            svg: undefined,
            point1Instance: undefined, // 两个主要端点之一
            point2Instance: undefined, // 两个主要端点之一
            pathInstance: undefined, // 两个端点之间的连线
            point1X: 100,
            point1Y: 100,
            point2X: 300,
            point2Y: 300,
            innerCircle: 5, // 两个端点之间还有 5 个端点
            otherInstance: [] // 其他端点实例
        },

			
		

	





	

		

			

				
					
vue-d3.js绘制柱状图（含动画和交互）

				
			

			

				

					weixin_44867717的博客
				

				

					06-25
					
					1510
					
				

			

		

		

			
				
vue-d3.js绘制柱状图（含动画和交互）
1、安包

npm install sass-loader -D
npm install node-sass -D
cnpm install node-sass -D
cnpm install core-js@2

2、代码
<template>
  <div class="d3Chart"></div>
</template>
<script>
import * as d3 from "d3";
ex

			
		

	





	

		

			

				
					
使用D3.js+Vue实现一个简单的柱形图

				
			

			

				

					10-18
				

			

		

		

			
				
D3.js与Vue结合实现柱形图的知识点涵盖了Web开发、数据可视化和前端框架的运用。下面详细讲解相关知识点：  首先，D3.js是一个强大的数据可视化库，它允许开发者使用HTML、SVG和CSS来操作文档，并且根据数据动态生成...

			
		

	





	

		

			

				
					
d3.js实现动态拓扑图

				
			

			

				

					10-24
				

			

		

		

			
				
d3.js（Data-Driven Documents）是一个强大的JavaScript库，专为创建交互式和可定制的数据可视化而设计。本教程将深入探讨如何使用d3.js来实现动态拓扑图，包括添加、删除节点以及支持拖拽功能。  **1. d3.js 简介**...

			
		

	





	

		

			

				
					
见微知著 - D3JS这个极客很爱的可视化框架

				
			

			

				

					大转转FE
				

				

					05-26
					
					1805
					
				

			

		

		

			
				
一、D3是什么？全称：Data-Driven Documents - 数据驱动的文档。 github仓库D3是一个被数据驱动的可视化工具库，可以帮助你使用HTML、CSS、SVG和Canv...

			
		

	





	

		

			

				
					
Vue.js实战第六章笔记

				
			

			

				

					ss_veine的博客
				

				

					01-04
					
					273
					
				

			

		

		

			
				
6.1基本用法
在 Vue 提供了v-model指令，用于在表单类元素上 双向绑定数据
使用v-model时，如果使用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉字时，才会触发更新。如果希望实时更新 ，可以用@input代替v-model
单选按钮：
单独使用时，用v-bind绑定一个布尔值，为真即选中

data:{picked:true}
组合使...

			
		

	





	

		

			

				
					
d3.js vue 力引导图 堆叠问题 添加标签 防止重叠

				
			

			

				

					似水流年，举重若轻
				

				

					04-09
					
					1488
					
				

			

		

		

			
				
文档：https://www.zhihu.com/question/38648735
d3.js vue 力引导图 堆叠问题 添加标签

			
		

	





	

		

			

				
					
vued3一个D3的Vuejs插件

				
			

			

				

					08-10
				

			

		

		

			
				
vue-d3：一个D3的Vue.js插件

			
		

	





	

		

			

				
					
d3.v5.min.js

				
			

			

				

					11-09
				

			

		

		

			
				
d3.v5.min.js资源下载，关于数据驱动的文档的javascript类库，用于使用Web标准可视化数据。D3帮助您使用SVG、画布和HTML将数据带入生活。D3将强大的可视化和交互技术与数据驱动的DOM操作方法结合起来，为您提供了现代浏览器的全部功能和为您的数据设计正确的可视化界面的自由。

			
		

	





	

		

			

				
					
vuejs plus d3

				
			

			

				

					weixin_34377919的博客
				

				

					04-26
					
					76
					
				

			

		

		

			
				
vuejs 是一个数据驱动视图的前端框架，一切皆可以作为可重用的组件加以使用。
d3则是数据可视化javascript库，如何将二者的长处相结合是一个挑战。
https://tyronetudehope.com/2016/12/13/composing-d3-visualizations-with-vuejs/

<script>
import * as d3 from 'd...

			
		

	





	

		

			

				
					
vue.js示例_D3 vue.js示例

				
			

			

				

					cuk5340的博客
				

				

					07-31
					
					822
					
				

			

		

		

			
				
vue.js示例 vue d3示例 (vue d3 examples)
Vue   D3   V5   Examples
 Vue D3 V5 Examples 
npm: v6.7.0
 npm： v6.7.0 
node: v11.10.0
 节点： v11.10.0 
d3: v5.9.1
 d3： v5.9.1 
View Demo
查看演示 View Github 
查看Github  ...

			
		

	





	

		

			

				
					
d3.v5各种scale傻傻分不清

				
			

			

				

					Valdis的魔法商店
				

				

					03-31
					
					990
					
				

			

		

		

			
				
在d3.js的语境下，scale是用来生成坐标轴用的：


let axis = d3.axisXXX(scale);    // 如此就得到了一个坐标轴生成器

这里的XXX有四个选项，分别是Left、Right、Top、Bottom，用来表示生成坐标轴的摆放位置，这里暂且不多说。

而scale的一般用法是：


let scale = d3.scaleXXX().domain(param)....

			
		

	





	

		

			

				
					
如何在Vue3中使用D3.js实现数据可视化？

				
			

			

				

					有我更精彩的博客
				

				

					06-14
					
					1688
					
				

			

		

		

			
				
随着Web技术的发展，数据可视化已经成为前端开发中的一个热门话题。而D3.js作为最强大的数据可视化库之一，通常与各种前端框架一起使用，如Vue.js。在这篇文章中，我们将探讨如何在Vue3中结合D3.js来实现数据可视化。我们将通过一个具体的示例，逐步介绍实现的过程。

			
		

	





	

		

			

				
					
D3.js的v5版本入门教程（第十一章）——交互式操作

				
			

			

				

					数星星等天明的博客
				

				

					04-23
					
					9014
					
				

			

		

		

			
				
D3.js的v5版本入门教程（第十一章）



    与图形进行交互操作是很重要的！所谓的交互操作也就是为图形元素添加监听事件，比如说当你鼠标放在某个图形元素上面的时候，就会显示相应的文字，而当鼠标移开后，文字就会消失，或者鼠标单击一下某图形元素就会使它动起来

    为了与图形元素进行交互操作，我们还是需要以下新的知识点

on("eventName",function)；该函数是添加一个监...

			
		

	





	

		

			

				
					
【D3.js - v5.x】（3）Update & Enter & Exit | 交互 | 布局

				
			

			

				

					前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
				

				

					04-23
					
					756
					
				

			

		

		

			
				
Update、Enter、Exit
Update、Enter、Exit 是 D3 中三个非常重要的概念，它处理的是当选择集和数据的数量关系不确定的情况。
什么是 Update、Enter、Exit
假设，在 body 中有三个 p 元素，有一数组 [3, 6, 9]，则可以将数组中的每一项分别与一个 p 元素绑定在一起。但是，有一个问题：**当数组的长度与元素数量不一致（数组长度 > 元素数......

			
		

	





	

		

			

				
					
Chrome扩展：Vue.js开发者利器-vue-devtools插件

				
			

			

				

					
				

			

		

		

			
				
Vue.js 是一种流行的前端JavaScript框架，用于构建用户界面和单页应用程序。Vue-devtools 允许开发者在 Chrome 开发者工具中直接检查和调试 Vue 应用，极大地提升了开发效率和问题定位的便捷性。以下是使用 vue-...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值