流动性分析-树状图（d3.js v3版本实现）

蔚落 2022-05-24 09:37 155阅读 0赞

参考的例子：[http://bl.ocks.org/robschmuecker/7880033][http_bl.ocks.org_robschmuecker_7880033]

*  [一、为什么选择d3.js][d3.js]
 *  [二、d3.js概述][d3.js 1]
 *  [三：树状图实现][Link 1]
    
     *  [1、创建svg][1_svg]
     *  [2、在svg元素里面画一个g标签，用于存放树结构][2_svg_g]
     *  [3、组织树结构，获取树结构原始数据，d3加工数据][3_d3]
        
         *  [1.创建tree][1._tree]
         *  [2.加工数据][2.]
     *  [4、data方式绑定数据生成数据结构，创建整棵树][4_data]
     *  [5、创建树节点，设置样式并绑定事件][5]
        
         *  [问题：节点的text定位问题？连接线的定位问题？][text]
     *  [6、连接线生成器][6]
     *  [7、过渡效果  transition][7_ transition]
     *  [8、tooltip及编辑框][8_tooltip]
     *  [       9、获取节点，更新节点方式][_ _ _9]

# 一、为什么选择d3.js #

echarts绘制树状图的局限性：

1、echarts实现的树节点样式比较单一，如下图所示的树节点的样式无法实现，尤其是编辑图标。

2、echarts点击事件只能绑定在树节点的那个节点（下图的圈圈）上，而项目需要绑定树节点的悬浮事件，编辑图标的点击事件。

3、树的连接线与圆点分离，项目需要，用echarts基本无法实现。

根据以上业务需求，促使我们选择d3.js技术实现树状图。

![image2018-5-4_209_3A58_3A29.png_version_1_modificationDate_1525403380000_api_v2][]

# 二、d3.js概述 #

D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及 HTML 将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术结合起来, 让你可以借助于现代浏览器的强大功能自由的对数据进行可视化.

API地址： [https://github.com/xswei/d3js\_doc][https_github.com_xswei_d3js_doc]

![image2018-5-4_2011_3A2_3A37.png_version_1_modificationDate_1525403380000_api_v2][]

# 三：树状图实现 #

## 1、创建svg ##

**d3选择器**选择svg元素赋值宽高

**this.svg = d3.select(this.chartRef)**

**.attr('width', this.width)**

**.attr('height', this.height)**

## 2、在svg元素里面画一个g标签，用于存放树结构 ##

**this.svgGroup = this.svg.append('g')**

## 3、组织树结构，获取树结构原始数据，d3加工数据 ##

树结构原始数据格式：

name:  '偿付能力',

field:  'root',

circleColor:  'white',

notEdit:  true,

children: \[

name:  '经营和投资汇总',

field:  'jyhtzhz',

value:  40,

unit:  '亿元',

desc:  '销售现金回款+租金收入-土地购买支出-一般成本汇总-税务开支汇总',

circleColor:  '\#09BE49',

children: \[

name:  '销售现金回款',

field:  'xsxjhk',

fieldRelation:  'jyhtzhz,xsxjhk,zjsr,tdgmzc,ybcbhz,swkzhz',

funCalc:  'xsxjhk+zjsr-tdgmzc-ybcbhz-swkzhz',

value:  100,

unit:  '亿元',

desc:  '销售金额\*回款率',

circleColor:  '\#09BE49',

### 1.创建tree ###

**// 对角线生成器，x和y对调则生成从左到右展开的树**

**this.diagonal = d3.svg.diagonal()**

**.projection((d) => \{ return \[this.svgGWidth - d.y, d.x\] \})**

**        // 创建tree**

**this.tree = d3.layout.tree()**

**.size(\[this.height, this.width\])**

### 2.加工数据 ###

// 取最大节点数 乘以 固定高度 得到树的高度

let  newHeight =  d3. max( levelWidth) \*  50

this. tree =  this. tree. size(\[ newHeight,  this. width\])

// Compute the new tree layout.

**let nodes = this.tree.nodes(this.root).reverse()**

// Normalize for fixed-depth.

**nodes.forEach((d) => \{ d.y = d.depth \* 220 \})**

** nodes就是加工后的数据**

## 4、data方式绑定数据生成数据结构，创建整棵树 ##

**// 根据id绑定数据，返回update的节点，需要更新的节点**

**let node = this.svgGroup.selectAll('g.node')**

**.data(nodes, (d) => \{ return d.id || (d.id = ++this.i) \})**

**// Enter any new nodes at the parent's previous position.**

**// 操作enter的节点，新增新的节点，这里的节点位置采用老的位置**

**let nodeEnter = node.enter().append('svg:g')**

**.attr('class', 'node')**

**.attr('transform', (d) => \{ return \`translate($\{ (this.svgGWidth \- source.y0)\},$\{ source.x0\})\` \})**

**// Transition exiting nodes to the parent's new position.**

**// 退出节点过渡效果后删除**

**let nodeExit = node.exit().transition()**

**.duration(duration)**

**.attr('transform', (d) => \{ return \`translate($\{ (this.svgGWidth \- source.y)\},$\{ source.x\})\` \})**

**.remove()**

**// update link 需要更新的连接线**

**let link = this.svgGroup.selectAll('path.link')**

**.data(this.tree.links(nodes), (d) => \{ return d.target.id \})**

**// Enter any new links at the parent's previous position.**

**// 生成新的连接线，连接线位置是老的**

**link.enter().insert('svg:path', 'g')**

**.attr('class', 'link')**

**.style('fill', 'none')**

**.style('stroke', 'rgba(255,255,255,0.2)')**

**.style('stroke-width', '1px')**

**.attr('d', (d) => \{**

**let o = \{ x: source.x0, y: source.y0 \}**

**return this.diagonal(\{ source: o, target: o \})**

**\})**

**// Transition exiting nodes to the parent's new position.**

**// exit 过渡效果到新的位置然后移除**

**link.exit().transition()**

**.duration(duration)**

**.attr('d', (d) => \{**

**let o = \{ x: source.x, y: source.y \}**

**return this.diagonal(\{ source: o, target: o \})**

**\})**

**.remove()**

## 5、创建树节点，设置样式并绑定事件 ##

![image2018-5-4_2013_3A44_3A19.png_version_1_modificationDate_1525412657000_api_v2][]

这个树节点其实是由 一个大的<g>元素，包了一个text元素，一个tspan元素，一个image元素，一个circle元素组成。

**let text = nodeEnter.append('svg:text')**

**.on('mouseover', function (d) \{**

**d3.select(this).style('fill', '\#a5d5e4')**

**// 描述信息**

**\})**

**.on('mouseout', function (d) \{**

**d3.select(this).style('fill', '\#FFFFFF')**

**\})**

**text.append('svg:tspan')**

**.attr('dx', (d) => \{ return 10 \})**

**.attr('text-anchor', (d) => \{ return 'start' \})**

**.style('fill', 'rgba(255,255,255,0.5)')**

**.text((d) => \{**

**return d.value != null ? d.value : ''**

**\})**

**/\*\***

**\* 编辑按钮，绑定了编辑事件**

**\*/**

**nodeEnter.append('svg:image')**

**.on('click', function (d) \{**

**\_// 编辑事件**

**\})**

// 树节点上的圈圈

**nodeEnter.append('svg:circle')**

**.attr('r', 1e-6)**

**.style('fill', (d) => \{ return d.\_children ? d.circleColor : '\#0e1821' \})**

**.style('stroke', (d) => \{**

**return d.circleColor ? d.circleColor : 'steelblue'**

**\})**

**.style('stroke-width', '1.5')**

**.style('cursor', 'pointer')**

**.on('click', (d) => \{ this.toggle(d); this.update(d) \}) // 绑定的树节点展开和折叠的方法**

### 问题：节点的text定位问题？连接线的定位问题？ ###

需要计算节点上面文字的长度计算出具体的宽度像素值，这样就可以动态确定编辑图标的位置以及连接线的位置。

下图所示，编辑图标和连接线紧跟在文字后面就是这种方式实现的

![image2018-5-4_2014_3A4_3A26.png_version_1_modificationDate_1525413864000_api_v2][]

## 6、连接线生成器 ##

**// 对角线生成器，x和y对调则生成从左到右展开的树**

**this.diagonal = d3.svg.diagonal()**

**.projection((d) => \{ return \[this.svgGWidth - d.y, d.x\] \})**

**// 生成新的连接线，连接线位置是老的**

**link.enter().insert('svg:path', 'g')**

**.attr('class', 'link')**

**.style('fill', 'none')**

**.style('stroke', 'rgba(255,255,255,0.2)')**

**.style('stroke-width', '1px')**

**.attr('d', (d) => \{**

**let o = \{ x: source.x0, y: source.y0 \}**

**return this.diagonal(\{ source: o, target: o \})**

**\})**

**// Transition links to their new position.**

**// 过渡到新的位置**

**link.transition()**

**.duration(duration)**

**// .attr('d', this.diagonal)**

**.attr('d', (d) => \{**

**d.target.y -= \_this.calcWidth(d.target) + 25**

**return this.diagonal(d)**

**\})**

## **7、过渡效果  transition** ##

**// Transition nodes to their new position.**

**// 节点过渡效果，移动到新的位置**

**let nodeUpdate = node.transition()**

**.duration(duration)**

**.style('cursor', 'pointer')**

**.attr('transform', (d) => \{ return \`translate($\{ (this.svgGWidth \- d.y)\},$\{ d.x\})\` \})**

## 8、tooltip及编辑框 ##

**![image2018-5-4_2014_3A23_3A24.png_version_1_modificationDate_1525415002000_api_v2][]**

**实际是悬浮的div**

**有个插件 d3-tip 做tooltip的，v3支持的不好，升级到v4时可以用。**

## **       9、获取节点，更新节点方式** ##

**/\*\***

**\* 拿到指定元素**

**\* @param \{\*\} element 元素名称**

**\* @param \{\*\} field 叶子节点唯一字段**

**\*/**

**getSvgElement (elementName, field) \{**

**if (!elementName) \{**

**elementName = 'tspan'**

**\}**

**// 默认当前节点**

**if (!field) \{**

**field = this.state.field**

**\}**

**let arr = d3.selectAll(elementName)\[0\] //获取指定元素的所有节点**

**for (let obj of arr) \{**

**if (obj.\_\_data\_\_ && obj.\_\_data\_\_.field && obj.\_\_data\_\_.field === field) \{**

**return obj**

**\}**

**return null**

**\}**

**更新节点的值**

**getSvgElement (elementName, field)**

**.text(this.state.leftValue + this.state.unit)**

**.style('fill', color)**

[http_bl.ocks.org_robschmuecker_7880033]: http://bl.ocks.org/robschmuecker/7880033
[d3.js]: http://wiki.htzq.htsc.com.cn/pages/viewpage.action?pageId=32775991#id-%E6%B5%81%E5%8A%A8%E6%80%A7%E5%88%86%E6%9E%90-%E6%A0%91%E7%8A%B6%E5%9B%BE%EF%BC%88d3.jsv3%E7%89%88%E6%9C%AC%E5%AE%9E%E7%8E%B0%EF%BC%89-%E4%B8%80%E3%80%81%E4%B8%BA%E4%BB%80%E4%B9%88%E9%80%89%E6%8B%A9d3.js
[d3.js 1]: http://wiki.htzq.htsc.com.cn/pages/viewpage.action?pageId=32775991#id-%E6%B5%81%E5%8A%A8%E6%80%A7%E5%88%86%E6%9E%90-%E6%A0%91%E7%8A%B6%E5%9B%BE%EF%BC%88d3.jsv3%E7%89%88%E6%9C%AC%E5%AE%9E%E7%8E%B0%EF%BC%89-%E4%BA%8C%E3%80%81d3.js%E6%A6%82%E8%BF%B0
[Link 1]: http://wiki.htzq.htsc.com.cn/pages/viewpage.action?pageId=32775991#id-%E6%B5%81%E5%8A%A8%E6%80%A7%E5%88%86%E6%9E%90-%E6%A0%91%E7%8A%B6%E5%9B%BE%EF%BC%88d3.jsv3%E7%89%88%E6%9C%AC%E5%AE%9E%E7%8E%B0%EF%BC%89-%E4%B8%89%EF%BC%9A%E6%A0%91%E7%8A%B6%E5%9B%BE%E5%AE%9E%E7%8E%B0
[1_svg]: http://wiki.htzq.htsc.com.cn/pages/viewpage.action?pageId=32775991#id-%E6%B5%81%E5%8A%A8%E6%80%A7%E5%88%86%E6%9E%90-%E6%A0%91%E7%8A%B6%E5%9B%BE%EF%BC%88d3.jsv3%E7%89%88%E6%9C%AC%E5%AE%9E%E7%8E%B0%EF%BC%89-1%E3%80%81%E5%88%9B%E5%BB%BAsvg
[2_svg_g]: http://wiki.htzq.htsc.com.cn/pages/viewpage.action?pageId=32775991#id-%E6%B5%81%E5%8A%A8%E6%80%A7%E5%88%86%E6%9E%90-%E6%A0%91%E7%8A%B6%E5%9B%BE%EF%BC%88d3.jsv3%E7%89%88%E6%9C%AC%E5%AE%9E%E7%8E%B0%EF%BC%89-2%E3%80%81%E5%9C%A8svg%E5%85%83%E7%B4%A0%E9%87%8C%E9%9D%A2%E7%94%BB%E4%B8%80%E4%B8%AAg%E6%A0%87%E7%AD%BE%EF%BC%8C%E7%94%A8%E4%BA%8E%E5%AD%98%E6%94%BE%E6%A0%91%E7%BB%93%E6%9E%84
[3_d3]: http://wiki.htzq.htsc.com.cn/pages/viewpage.action?pageId=32775991#id-%E6%B5%81%E5%8A%A8%E6%80%A7%E5%88%86%E6%9E%90-%E6%A0%91%E7%8A%B6%E5%9B%BE%EF%BC%88d3.jsv3%E7%89%88%E6%9C%AC%E5%AE%9E%E7%8E%B0%EF%BC%89-3%E3%80%81%E7%BB%84%E7%BB%87%E6%A0%91%E7%BB%93%E6%9E%84%EF%BC%8C%E8%8E%B7%E5%8F%96%E6%A0%91%E7%BB%93%E6%9E%84%E5%8E%9F%E5%A7%8B%E6%95%B0%E6%8D%AE%EF%BC%8Cd3%E5%8A%A0%E5%B7%A5%E6%95%B0%E6%8D%AE
[1._tree]: http://wiki.htzq.htsc.com.cn/pages/viewpage.action?pageId=32775991#id-%E6%B5%81%E5%8A%A8%E6%80%A7%E5%88%86%E6%9E%90-%E6%A0%91%E7%8A%B6%E5%9B%BE%EF%BC%88d3.jsv3%E7%89%88%E6%9C%AC%E5%AE%9E%E7%8E%B0%EF%BC%89-1.%E5%88%9B%E5%BB%BAtree
[2.]: http://wiki.htzq.htsc.com.cn/pages/viewpage.action?pageId=32775991#id-%E6%B5%81%E5%8A%A8%E6%80%A7%E5%88%86%E6%9E%90-%E6%A0%91%E7%8A%B6%E5%9B%BE%EF%BC%88d3.jsv3%E7%89%88%E6%9C%AC%E5%AE%9E%E7%8E%B0%EF%BC%89-2.%E5%8A%A0%E5%B7%A5%E6%95%B0%E6%8D%AE
[4_data]: http://wiki.htzq.htsc.com.cn/pages/viewpage.action?pageId=32775991#id-%E6%B5%81%E5%8A%A8%E6%80%A7%E5%88%86%E6%9E%90-%E6%A0%91%E7%8A%B6%E5%9B%BE%EF%BC%88d3.jsv3%E7%89%88%E6%9C%AC%E5%AE%9E%E7%8E%B0%EF%BC%89-4%E3%80%81data%E6%96%B9%E5%BC%8F%E7%BB%91%E5%AE%9A%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%EF%BC%8C%E5%88%9B%E5%BB%BA%E6%95%B4%E6%A3%B5%E6%A0%91
[5]: http://wiki.htzq.htsc.com.cn/pages/viewpage.action?pageId=32775991#id-%E6%B5%81%E5%8A%A8%E6%80%A7%E5%88%86%E6%9E%90-%E6%A0%91%E7%8A%B6%E5%9B%BE%EF%BC%88d3.jsv3%E7%89%88%E6%9C%AC%E5%AE%9E%E7%8E%B0%EF%BC%89-5%E3%80%81%E5%88%9B%E5%BB%BA%E6%A0%91%E8%8A%82%E7%82%B9%EF%BC%8C%E8%AE%BE%E7%BD%AE%E6%A0%B7%E5%BC%8F%E5%B9%B6%E7%BB%91%E5%AE%9A%E4%BA%8B%E4%BB%B6
[text]: http://wiki.htzq.htsc.com.cn/pages/viewpage.action?pageId=32775991#id-%E6%B5%81%E5%8A%A8%E6%80%A7%E5%88%86%E6%9E%90-%E6%A0%91%E7%8A%B6%E5%9B%BE%EF%BC%88d3.jsv3%E7%89%88%E6%9C%AC%E5%AE%9E%E7%8E%B0%EF%BC%89-%E9%97%AE%E9%A2%98%EF%BC%9A%E8%8A%82%E7%82%B9%E7%9A%84text%E5%AE%9A%E4%BD%8D%E9%97%AE%E9%A2%98%EF%BC%9F%E8%BF%9E%E6%8E%A5%E7%BA%BF%E7%9A%84%E5%AE%9A%E4%BD%8D%E9%97%AE%E9%A2%98%EF%BC%9F
[6]: http://wiki.htzq.htsc.com.cn/pages/viewpage.action?pageId=32775991#id-%E6%B5%81%E5%8A%A8%E6%80%A7%E5%88%86%E6%9E%90-%E6%A0%91%E7%8A%B6%E5%9B%BE%EF%BC%88d3.jsv3%E7%89%88%E6%9C%AC%E5%AE%9E%E7%8E%B0%EF%BC%89-6%E3%80%81%E8%BF%9E%E6%8E%A5%E7%BA%BF%E7%94%9F%E6%88%90%E5%99%A8
[7_ transition]: http://wiki.htzq.htsc.com.cn/pages/viewpage.action?pageId=32775991#id-%E6%B5%81%E5%8A%A8%E6%80%A7%E5%88%86%E6%9E%90-%E6%A0%91%E7%8A%B6%E5%9B%BE%EF%BC%88d3.jsv3%E7%89%88%E6%9C%AC%E5%AE%9E%E7%8E%B0%EF%BC%89-7%E3%80%81%E8%BF%87%E6%B8%A1%E6%95%88%E6%9E%9Ctransition
[8_tooltip]: http://wiki.htzq.htsc.com.cn/pages/viewpage.action?pageId=32775991#id-%E6%B5%81%E5%8A%A8%E6%80%A7%E5%88%86%E6%9E%90-%E6%A0%91%E7%8A%B6%E5%9B%BE%EF%BC%88d3.jsv3%E7%89%88%E6%9C%AC%E5%AE%9E%E7%8E%B0%EF%BC%89-8%E3%80%81tooltip%E5%8F%8A%E7%BC%96%E8%BE%91%E6%A1%86
[_ _ _9]: http://wiki.htzq.htsc.com.cn/pages/viewpage.action?pageId=32775991#id-%E6%B5%81%E5%8A%A8%E6%80%A7%E5%88%86%E6%9E%90-%E6%A0%91%E7%8A%B6%E5%9B%BE%EF%BC%88d3.jsv3%E7%89%88%E6%9C%AC%E5%AE%9E%E7%8E%B0%EF%BC%89-9%E3%80%81%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9%EF%BC%8C%E6%9B%B4%E6%96%B0%E8%8A%82%E7%82%B9%E6%96%B9%E5%BC%8F
[image2018-5-4_209_3A58_3A29.png_version_1_modificationDate_1525403380000_api_v2]: http://wiki.htzq.htsc.com.cn/download/attachments/32775991/image2018-5-4%209%3A58%3A29.png?version=1&modificationDate=1525403380000&api=v2
[https_github.com_xswei_d3js_doc]: https://github.com/xswei/d3js_doc
[image2018-5-4_2011_3A2_3A37.png_version_1_modificationDate_1525403380000_api_v2]: http://wiki.htzq.htsc.com.cn/download/attachments/32775991/image2018-5-4%2011%3A2%3A37.png?version=1&modificationDate=1525403380000&api=v2
[image2018-5-4_2013_3A44_3A19.png_version_1_modificationDate_1525412657000_api_v2]: http://wiki.htzq.htsc.com.cn/download/attachments/32775991/image2018-5-4%2013%3A44%3A19.png?version=1&modificationDate=1525412657000&api=v2
[image2018-5-4_2014_3A4_3A26.png_version_1_modificationDate_1525413864000_api_v2]: http://wiki.htzq.htsc.com.cn/download/attachments/32775991/image2018-5-4%2014%3A4%3A26.png?version=1&modificationDate=1525413864000&api=v2
[image2018-5-4_2014_3A23_3A24.png_version_1_modificationDate_1525415002000_api_v2]: http://wiki.htzq.htsc.com.cn/download/attachments/32775991/image2018-5-4%2014%3A23%3A24.png?version=1&modificationDate=1525415002000&api=v2