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的各种信息了

比如

event.target.className, event.target.checked

d3.event=null的更多相关文章

  1. svg + d3

    为了实现元素的添加,删除,拖拽,左键点击,右键单击,悬浮等功能,使用了d3 + svg 的技术来实现界面. 最开始是采用canvas,但是由于功能原因放弃了该技术,可以看下 canvas简介 另附:c ...

  2. D3树状图给指定特性的边特别显示颜色

    D3作为前端图形显示的利器,功能之强,对底层技术细节要求相对比较多. 有一点,就是要理解其基本的数据和节点的匹配规则架构,即enter,update和exit原理,我前面的D3基础篇中有介绍过,不明白 ...

  3. D3树状图异步按需加载数据

    D3.js这个绘图工具,功能强大不必多说,完全一个Data Driven Document的绘图工具,用户可以按照自己的数据以及希望实现的图形,随心所欲的绘图. 图形绘制,D3默认采用的是异步加载,但 ...

  4. D3.js 力导向图

    花了大半天看了一个八十几行的代码..心累 力导向图是之前就有画过很多次的东西,但是这次的代码看上去很陌生,然后发现是D3更新了4.0.... 先贴代码 var svg = d3.select(&quo ...

  5. D3、EChart、HighChart绘图demol

    1.echarts:   <!DOCTYPE html>   <html>   <head>   <meta charset="utf-8" ...

  6. d3.js:数据可视化利器之 交互行为:响应DOM事件

    selection.on:事件监听操作符 on()操作符可以添加或移除选择集中每个 DOM元素的事件监听函数: selection.on(type[,listener[,capture]]) 参数ty ...

  7. 软件项目技术点(1)——d3.interpolateZoom-在两个点之间平滑地缩放平移

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 软件参考d3的知识点 我们在软件中主要用到d3.js的核心函数d3.interpolateZoom - 在两个点之间平滑地缩放平移.请 ...

  8. D3.js 力导向图(小气泡围绕中心气泡)

    html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

  9. [D3] Add image to the node

    We can create node with 'g' container, then append 'image' to the nodes. // Create container for the ...

随机推荐

  1. 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 ...

  2. C# Window Service安装、卸载、恢复选项操作

    using System;using System.Diagnostics;using System.Linq;using System.ServiceProcess; namespace ScmWr ...

  3. nginx+fastCGI

    首先贴些遇到的问题,之后再整理 1.yum -y install pcre zlib OpenSSL openssl-devel  pcre-devel 2. nginx: [emerg] " ...

  4. requests库

    还没整理,先贴俩链接. https://www.cnblogs.com/lilinwei340/p/6417689.html http://docs.python-requests.org/zh_CN ...

  5. python 常用turtle

    python 常用turtle 常用命令1 import turtle turtle.bgcolor("black") 设置背景颜色 turtle.onscreenclick(x, ...

  6. 用Springboot实现文件下载功能

    ApiOperation(value = "下载文件", httpMethod = "GET", notes = "downloadFile" ...

  7. FREERTOS学习笔记

    2012-02-25 21:43:40 为提升自己对实时操作系统(RTOS)的认识,我学习了freeRTOS. 理解了OS任务的状态.优先级的概念.信号量的概念.互斥的概念.队列.内存管理.这都是和R ...

  8. 原 HTML5+规范:barcode(条码扫描)

    https://blog.csdn.net/qq_27626333/article/details/51815121 引用,版权归作者所有:

  9. axios请求

    axios.get('/user?ID=12345') .then(function (response) { console.log(response); console.log(response. ...

  10. 使用aspx 直接生成excel

    <%@ Page Language="C#" EnableEventValidation="false" ResponseEncoding="g ...