d3根据数据绘制不同的形状
绘制力导向图的时候通常节点都是圆形,但也会遇到公司节点绘制成圆型,人绘制成方形的情况,那我们怎么依据数据绘制不同的形状。
你可能首先会想到,这很简单啊,是公司的时候append circle,是人的时候append rect。但是append并没有提供回调也就是说我们不能这样做。
node.append((data)=>{
return data.type === 'person' ? 'rect' : 'circle';
});
下面介绍两种方案:
第一种,先append一个g然后根据数据设置不同的类名
var nodeGUpdate = this.nodeG
.selectAll('g')
.data(this.nodesData, (data) => data.id); var nodeGEnter = nodeGUpdate.enter();
var nodeGExit = nodeGUpdate.exit();
// 更新
nodeGUpdate
.transition()
.attr('class', (data) => {
return (data.hide && 'hide') || (data.nodeStatus < 0 && 'noActive') || (data.cateType === 0 && 'mainCompany') || (data.cateType === 1 && 'relativeCompany') || (data.cateType === 2 && 'relativePerson');
})
nodeGEnter.append('g')
.attr('class', (data)=> {
return data.cateType === 2 ? 'person' : 'company';
})
然后依据类名append不同形状
添加矩形
this.nodeG
.selectAll('.person')
.append('rect')
.attr('class', (data) => {
return (data.hide && '.hide') || (data.cateType === 0 && 'mainCompany') || (data.cateType === 1 && 'relativeCompany') || (data.cateType === 2 && 'relativePerson');
})
.attr('width', 20)
.attr('height', 20);
添加圆形
this.nodeG
.selectAll('.company')
.append('circle')
.attr('class', (data) => {
return (data.hide && '.hide') || (data.cateType === 0 && 'mainCompany') || (data.cateType === 1 && 'relativeCompany') || (data.cateType === 2 && 'relativePerson');
})
.attr('r', 20);
最后效果
这有点尴尬,矩形是以它自身的左上角的为基点,所以你可能还需要根据象限进行平移。
上面这种思路是我从其它文章看来的,但出处忘了,但是由于还要将矩形的中心移到线的端点太麻烦,所以最终没有采用这种方法。
下面来讲另外一种方法
整体思路是统一append circle 但是当是人的时候填充圆形。就是可以想象append的这个circle相当于一个透明的画布,如果fill的值是颜色,那就是用这个颜色去填充这个圆。如果fill的是一个形状,就是用这个形状填充,由于背景是透明的,所以看起来好像append了其它形状上去。
首先在svg中定义一个矩形,defs简单来说就是一个容器,在这个元素里面你可以定义一些元素供你重复使用,例如箭头和这里定义的矩形。
这里有几个地方需要注意:
矩形 x,y的值
x,y是矩形的左上角相对于圆形的位置,设置x,y的值将矩形移至圆的中心,这样才能确保线的端点指向矩形的中心。
计算公式是 x=y = r - 矩形宽度 / 2
确保矩形小于圆的内切正方形
打个比方,如果你透过一个圆形孔看一个较小的红色正方形,你会看到一个个完整的正方形,但如果正方形过大,你可能就只能看到一个红色的圆形了。
所以正方形宽度推导公式就是 width < 2*r / √2
<svg width="1000" height="1000">
<defs>
<pattern id="person" patternUnits="objectBoundingBox" width="1" height="1">
<rect x="10" y="10" width="20" height="20" fill="#7FBBA1" stroke="#5CA083"/>
</pattern>
</defs>
</svg>
确保圆是透明的
通俗点讲就是用于填充矩形的圆的样式中不能在设置fill和stroke了
然后在绘制圆形的地方引用
nodeEnter
.append('circle')
.attr('class', (data) => {
return (data.hide && '.hide') || (data.cateType === 0 && 'mainCompany') || (data.cateType === 1 && 'relativeCompany') || (data.cateType === 2 && 'shape-relativePerson');
})
.attr('r', 20)
.attr('fill', (data)=>{
return data.cateType === 2 ? 'url(#person)' : '';
})
下面是结果图
当然你可以扩展,例如如果是人的话绘制一个人的图片
<pattern id="person" patternUnits="objectBoundingBox" width="1" height="1">
<image href={user} width="20" height="20" x="10" y="10"/>
</pattern>
效果如图
d3根据数据绘制不同的形状的更多相关文章
- d3 根据数据绘制svg
, , , , ]; var circles = svg.selectAll("circle") .data(dataset) .enter() .append("cir ...
- d3.js:数据可视化利器之快速入门
hello,data! 在进入d3.js之前,我们先用一个小例子回顾一下将数据可视化的基本流程. 任务 用横向柱状图来直观显示以下数据: var data = [10,15,23,78,57,29,3 ...
- 如何将内存中的位图数据绘制在DC上
假如你定义了一个位图类,里面包含位图头,位图信息头,调色板,位图数据.然后你按照位图的格式将位图文件读入你的类中,现在你知道了位图的全部信息了.主要信息包含在位图信息头里面,数据则在位图数据缓冲里面. ...
- Highcharts使用CSV格式数据绘制图表
Highcharts使用CSV格式数据绘制图表 CSV(Comma-Separated Values,逗号分隔值文本格式)是採用逗号切割的纯文本数据.通常情况下.每一个数据之间使用逗号切割,几个相关数 ...
- linux环境安装nagiosgraph将nagios的性能数据绘制成动态图表?
需求描述: 在安装完成nagios之后,比如有监控磁盘负载信息的,连接数的,进程数的,可以通过安装nagiosgraph软件, 将nagios的性能数据绘制成图表,可以看到一段时间内数据的变化 环境说 ...
- Highcharts使用表格数据绘制图表
Highcharts使用表格数据绘制图表 在Highcharts中,同意用户使用网页中现有的表格数据作为数据来源,然后依据该数据来源绘制图表.对于一个典型的HTML表格.当中,第一列的数据会作为x轴刻 ...
- WPF 自定义的图表(适用大量数据绘制)下
原文:WPF 自定义的图表(适用大量数据绘制)下 上一篇文章中讲了WPF中自定义绘制大量数据的图标,思路是先将其绘制在内存,然后一次性加载到界面,在后续的调试过程中,发现当数据量到达10W时,移动鼠标 ...
- WPF 自定义的图表(适用大量数据绘制)
原文:WPF 自定义的图表(适用大量数据绘制) 在WPF中绘制图表比较简单,有很多的第三方控件,但是在绘制大量数据的时候,就显得有些吃力,即便是自己用StreamGeometry画也达不到理想的效果, ...
- MeteoInfoLab脚本示例:站点数据绘制等值线
站点数据绘制等值线需要首先将站点数据插值为格点数据,MeteoInfo中提供了反距离权法(IDW)和cressman两个方法,其中IDW方法可以有插值半径的选项.这里示例读取一个MICAPS第一类数据 ...
随机推荐
- 解决linux AMR转MP3出现转码成功却无法播放的问题
根据帖子:http://blog.csdn.net/z313731418/article/details/50218341 的提示,在linux安装ffmpeg,确实在linux下使用命令可以将am ...
- Python里Pure paths、PurePosixPath、PureWindowsPath的区别
Python是跨平台的,可以在不同的操作系统上运行.但是不同系统上路径 的表示方式是不一样的. 例如windows上路径使用“\”分割子目录和父目录,linux上是使用“/”来分割.这就是PurePo ...
- Matlab入门学习(矩阵、函数、绘图的基本使用)
一.矩阵 1.定义和简单使用(一般的编程语言,数组下标都是从0开始的,但是MATLAB是从1开始的) >> a=[ ; ; ] a = >> b=[ ; ; ]; >&g ...
- Azure SQL Database (24) 使用新管理界面,创建跨数据中心标准地域复制(Standard Geo-Replication)
<Windows Azure Platform 系列文章目录> 文本是对:SQL Azure (17) SQL Azure V12 - 跨数据中心标准地域复制(Standard Geo-R ...
- 用static声明的函数和变量小结
static 声明的变量在C语言中有两方面的特征: 1).变量会被放在程序的全局存储区中,这样可以在下一次调用的时候还可以保持原来的赋值.这一点是它与堆栈变量和堆变量的区别. 2).变量用static ...
- Android方法数不能超过65535
为什么方法数不能超过65535?搬上Dalvik工程师在SF上的回答,因为在Dalvik指令集里,调用方法的invoke-kind指令中,method reference index只给了16bits ...
- WaitAll 和 WhenAll 的使用及区别
用过.net 异步编程的同学都知道,比以前的多线程编程实现起来真的方便很多,今天把WaitAll和WhenAll这两种编程方式回顾总结一下(当然WaitAny.WhenAny是一样的操作) 1:Wai ...
- Linux系统管理命令(1)accton的使用
安装: apt install acct accton accton命令是Linux系统进程管理命令之一,它的作用是打开进程统计,如果不带任何参数,即关闭进程统计. 具体用法为:acc ...
- 洗礼灵魂,修炼python(4)--从简单案列中揭示常用内置函数以及数据类型
上一篇说到print语句,print是可以打印任何类型到屏幕上,都有哪些类型呢? 整形(int) 长整型(long) 浮点型(float) 字符型(str) 布尔型(bool) 最常见的就这几种. 在 ...
- P3377
题目描述 如题,一开始有N个小根堆,每个堆包含且仅包含一个数.接下来需要支持两种操作: 操作1: 1 x y 将第x个数和第y个数所在的小根堆合并(若第x或第y个数已经被删除或第x和第y个数在用一个堆 ...