d3.event=null
d3功能奇多, 已经模块化,(其实感觉和react差不多了).
所以默认打包的单个文件
<script src="https://d3js.org/d3.v5.min.js"></script>
或者直接
const d3 = require("d3")
这样默认打包体积大,但是也没有包括全部d3的模块
所以, github官方https://github.com/d3/d3
推荐这样
var d3 = Object.assign({}, require("d3-format"), require("d3-geo"), require("d3-geo-projection"));
尤其是,d3-selection-multi 这个没有默认打包的库,只能这么用. 这样可以使用attrs({}) 直接导入多个属性,尤其适合不需要数据绑定回调函数 (d, i) =>{} 的时候.
但是模块化使用d3的时候, 在响应事件的时候出现了问题.
d3里为了数据绑定需要, 响应事件统一这样:
selection.on('click', (d, i)={
})
而不能用字面的方式得到完整的event信息
selection.attr('onclick', 'callback($event)')
但万能的d3当然也能得到标准dom事件:
selection.on('click', (d, i)={
const event = d3.event;
......
})
但是之但是,在模块导入的时候, 这个d3.event 竟然返回null
稍微搜索了一下,不是1个人遇到这个问题, 参考https://brianschiller.com/blog/2017/09/28/d3-event-issues 这个人的发现之后
我这样干:
1导入d3
export const d3Selection = require("d3-selection")
export const d3 = Object.assign({}, event, require("d3-dispatch"), require("d3-selection"), require("d3-selection-multi"), require("d3-geo"));
其他d3功能,照样用下面模块化导入的d3,
而专门导入一个d3Selection 用来处理event
2事件
selection.on('click', (d, i)={
const event = d3Selection.event;
......
})
这样就能得到标准event的各种信息了
比如
d3.event=null的更多相关文章
- svg + d3
为了实现元素的添加,删除,拖拽,左键点击,右键单击,悬浮等功能,使用了d3 + svg 的技术来实现界面. 最开始是采用canvas,但是由于功能原因放弃了该技术,可以看下 canvas简介 另附:c ...
- D3树状图给指定特性的边特别显示颜色
D3作为前端图形显示的利器,功能之强,对底层技术细节要求相对比较多. 有一点,就是要理解其基本的数据和节点的匹配规则架构,即enter,update和exit原理,我前面的D3基础篇中有介绍过,不明白 ...
- D3树状图异步按需加载数据
D3.js这个绘图工具,功能强大不必多说,完全一个Data Driven Document的绘图工具,用户可以按照自己的数据以及希望实现的图形,随心所欲的绘图. 图形绘制,D3默认采用的是异步加载,但 ...
- D3.js 力导向图
花了大半天看了一个八十几行的代码..心累 力导向图是之前就有画过很多次的东西,但是这次的代码看上去很陌生,然后发现是D3更新了4.0.... 先贴代码 var svg = d3.select(&quo ...
- D3、EChart、HighChart绘图demol
1.echarts: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- d3.js:数据可视化利器之 交互行为:响应DOM事件
selection.on:事件监听操作符 on()操作符可以添加或移除选择集中每个 DOM元素的事件监听函数: selection.on(type[,listener[,capture]]) 参数ty ...
- 软件项目技术点(1)——d3.interpolateZoom-在两个点之间平滑地缩放平移
AxeSlide软件项目梳理 canvas绘图系列知识点整理 软件参考d3的知识点 我们在软件中主要用到d3.js的核心函数d3.interpolateZoom - 在两个点之间平滑地缩放平移.请 ...
- D3.js 力导向图(小气泡围绕中心气泡)
html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
- [D3] Add image to the node
We can create node with 'g' container, then append 'image' to the nodes. // Create container for the ...
随机推荐
- ORA-27104: system-defined limits for shared memory was misconfigured与Linux内核参数配置有关的案例
```[oracle@WWJD01 ~]$ sqlplus / as sysdba SQL*Plus: Release 12.2.0.1.0 Production on Fri Sep 21 15:1 ...
- C# Window Service安装、卸载、恢复选项操作
using System;using System.Diagnostics;using System.Linq;using System.ServiceProcess; namespace ScmWr ...
- nginx+fastCGI
首先贴些遇到的问题,之后再整理 1.yum -y install pcre zlib OpenSSL openssl-devel pcre-devel 2. nginx: [emerg] " ...
- requests库
还没整理,先贴俩链接. https://www.cnblogs.com/lilinwei340/p/6417689.html http://docs.python-requests.org/zh_CN ...
- python 常用turtle
python 常用turtle 常用命令1 import turtle turtle.bgcolor("black") 设置背景颜色 turtle.onscreenclick(x, ...
- 用Springboot实现文件下载功能
ApiOperation(value = "下载文件", httpMethod = "GET", notes = "downloadFile" ...
- FREERTOS学习笔记
2012-02-25 21:43:40 为提升自己对实时操作系统(RTOS)的认识,我学习了freeRTOS. 理解了OS任务的状态.优先级的概念.信号量的概念.互斥的概念.队列.内存管理.这都是和R ...
- 原 HTML5+规范:barcode(条码扫描)
https://blog.csdn.net/qq_27626333/article/details/51815121 引用,版权归作者所有:
- axios请求
axios.get('/user?ID=12345') .then(function (response) { console.log(response); console.log(response. ...
- 使用aspx 直接生成excel
<%@ Page Language="C#" EnableEventValidation="false" ResponseEncoding="g ...