angular7 + d3 显示svg
汇总一些之前没有注意到的问题
总体思路:
app只是显示svg为主,接收后端推送的数据改变,显示变化后的svg。
因此,只用d3的数据绑定更新组件里<svg></svg>节点. 而不用 ng的数据绑定。
d3的用法类似react
组件view 的svg部分由d3负责。 根据数据service接收到的"不可变数据”,让d3 判断绑定数据的改变,然后去更新view。
selection.data() 类似react的虚拟dom。 enter() exit() 子集类似diff 处理的callback。
这样,把d3封到1个service里。svg的操作部分在web组件里就没有了,在生命周期钩子里调用服务即可。
定制d3导入子模块,attrs:
一般用d3 都是:
import * as d3 from 'd3';
但是有2个问题:
1 d3现在特别大,这样import的绝大多数用不上,没必要
2 d3的子模块太多了,默认并没有把全部子模块都安装上,我很喜欢用的 .attrs()多个属性,就在d3-selection-multi里,默认安装d3是没有安装这个的。
想用这个,要手工安装
npm i d3-selection-multi
d3 官网https://github.com/d3/d3 只给出了node下的导入方式:
var d3 = Object.assign({}, require("d3-format"), require("d3-geo"), require("d3-geo-projection"));
在ts里要稍微变一下, 不得不每个命名1次,然后再Object.assign({}
import * as d3Selection from 'd3-selection'; import * as d3Attrs from 'd3-selection-multi'; import * as d3Geo from 'd3-geo'; export const d3 = Object.assign({}, d3Selection, d3Attrs, d3Geo);
然后后面就照用了。我用了export导出,可以给别的模块用。
ng使用d3.select()的渲染时机:
要在 ngAfterViewInit之后,不然view还没创建好 选不到任何元素。
svg的style
这个略坑。很多地方给出的解决方案是在组件元数据里设置:
encapsulation: ViewEncapsulation.None,
但这样的坏处是,d3.select('svg') 会找到全局全部svg,我恰好全局有多张svg,结果选中了多个组件里的svg。后面的数据绑定到每个svg上去了。(刚开始还怀疑是不是负责d3渲染的service是不是每个组件都要单独注入一个,后来一想这样太傻了,不可能。)
1 如果设置
ViewEncapsulation.None
那么,选中svg元素,就要设置一个id
::ng-deep g#marsh path { fill: rgb(21, 63, 13); fill-opacity: 0.5; stroke: rgb(21, 63, 13); stroke-width: 3; }
这样就OK了,个人认为这样最好。
——附注:ng7的 ViewEncapsulation 默认是 Emulated。
Member | Description |
---|---|
Emulated: 0 |
Emulate This is the default option. |
Native: 1 |
|
None: 2 |
Don't provide any template or style encapsulation. |
ShadowDom: 3 |
Use Shadow DOM to encapsulate styles. For the DOM this means using modern Shadow DOM and creating a ShadowRoot for Component's Host Element. |
默认效果用 ::ng-deep 就够了
Native在chrome 72上提示,马上要过期
None 说过了效果,各组件就串了,不推荐
ShadowDom 好像svg用不了。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- MongoDB——Ubuntu安装及配置带认证的副本集(亲测)
- 经验——SpringBoot 获取 resource 目录下的文件
- 聚类热图怎么按自己的意愿调整分支的顺序?
- H5|HTTP-FLV|WS-FLV|HLS|RTMP免费直播点播播放器如何自定义层叠DIV全屏后显示在视频上方?
- 什么是时间分片(Time Slicing)?
- 48岁的C语言,你知道它背后的历史吗?
- 【技术创作101训练营】我是如何使用freemarker生成Word文件的?
- 4种主流超参数调优技术
- PyTorch 最佳实践:模型保存和加载
- 突击并发编程JUC系列-启航篇
- 拜托!别再问我多线程的这些问题了
- Tomcat 架构原理解析到架构设计借鉴
- C++核心准则T.65:使用标签分发提供函数的不同实现
- Java开发中Websocket的技术选型参考
- Java 15正式发布,腾讯做出了突出贡献