【d3】树图-各种效果集合（附效果图）

效果：

包含代码点：

1、动态请求数据并更新

参考链接：https://www.cnblogs.com/shihuc/p/6064448.html

let sideBar= {open(type, d) {// ...http请求...// 数据成功请求后，将数据push到d.childrend.children.push(data);// 然后手动调用重新渲染svg函数_this.releSvgUpdate(d);}
};
nodeEnter.append("circle").on("click", function (d) {// 收缩if (d.children) {  d._children = d.children;d.children = null;_this.releSvgUpdate(d);  // 重新渲染svg}// 展开else if (d._children) {  d.children = d._children;d._children = null;_this.releSvgUpdate(d); // 重新渲染svg}// 侧边框函数（打开侧边框、http请求数据等操作）else if (d.key == 'article') {sideBar.open('article', d);}// 侧边框函数（打开侧边框、详情信息展示）else if (d.list) {sideBar.open('list', d);};});

2、circle节点图片展示

nodeEnter.append("circle").style("fill", function (d) {return `url(#bgImg-${d.id})`;})
nodeEnter.append("defs").append("pattern").attr("id", function (d) {return `bgImg-${d.id}`}).attr("height", "100%").attr("width", "100%").attr("patternContentUnits", "objectBoundingBox").append("image").attr("preserveAspectRatio", "none").attr("height", "1").attr("width", "1").attr("xlink:href", function (d) {// 判断是+（展开logo）还是-（收缩logo）let href = "../../../static/images/search/";href += d.children ? "minus.svg" : "add.svg";return href;});

3、text文字自动换行

参考链接：https://www.jianshu.com/p/263fce04422c

nodeEnter.append("text")// .text属性必须赋值，后续的this.getComputedTextLength()才能获取到文字宽高.text(function (d) { return d.name; }).attr("x", function () {let width = this.getComputedTextLength();width = (width > 70) ? width + 10 : 80;width = (width < 130) ? width : 130;let x = width / 2;return -x;})// tspan标签实现换行.each(function (d) {var text = d3.select(this),words = d.name.split('').reverse(),word,line = [],lineNumber = 0,x = +text.attr('x'),tspan = text.text(null).append('tspan').attr('x', x);while (word = words.pop()) {line.push(word);tspan.text(line.join(''));// 设置了最多显示两行，然后省略号if (lineNumber == 0 && tspan.node().getComputedTextLength() > 120) {line.pop();tspan.text(line.join('')).attr('y', -10);line = [word];++lineNumber;tspan = text.append('tspan').attr('x', x).attr('y', 10).text(word);}else if (lineNumber == 1 && tspan.node().getComputedTextLength() > 100) {tspan.text(line.join('') + '...');words = [];};}});

4、rect标签自适应文字大小

参考链接：https://www.cnblogs.com/fastmover/p/7794519.html

// 在text前插入一个rect，并按照text的属性来设置长宽及坐标
nodeEnter.insert("rect", "text") .datum(function () {// 大概计算宽高最大/小值，可实现文字垂直水平居中let d = this.nextSibling.getBBox();d.width = (d.width > 70) ? d.width + 10 : 80;d.width = (d.width < 130) ? d.width : 130;d.height = (d.height > 10) ? d.height + 20 : 30;d.x = -d.width - 1;d.y = -d.height / 2;return d;}).attr("width", function (d) { return d.width; }).attr("height", function (d) { return d.height; }).style('x', function (d) { return d.x; }).style('y', function (d) { return d.y; })

5、text、rect点击事件

d3图形是覆盖形式，故点击如下rect标签时，由于text标签在上方，故点击到text时不能触发rect点击事件（视觉上是点击了rect）

// text、rect加上同样的click事件
nodeEnter.append("text").on("click", function (d) {// click函数click(d)})
nodeEnter.insert("rect", "text").on("click", function () {// rect本无数据，故需要获取对应的text数据let d = this.nextSibling.__data__;// click函数click(d)});

还可参考此方法：D3.js鼠标悬停失败，并以重叠的对象

6、点击节点+ - logo不变化

// 手动删除该节点，使其重新渲染
d3.selectAll("g.node").each(function (d) {if (d.id == source.id) d3.select(this).remove();
});

7、连线 - 折线

//折线
let funLine = function (obj) {let s = obj.source,t = obj.target;return "M" + s.y + "," + s.x + "L" + (s.y + (t.y - s.y) / 4) + "," + s.x + "L" + (s.y + (t.y - s.y) / 4) + "," + t.x + "L" + t.y + "," + t.x;
};
// 增加新连接
link.enter().insert("path", "g").attr("class", "link").attr("d", function (d) {var o = { x: source.x0, y: source.y0 };return funLine({ source: o, target: o });});
// 原有连接更新位置
link.transition().duration(_this.releSvg.duration).attr("d", funLine);
// 折叠的链接，收缩到源节点处
link.exit().transition().duration(_this.releSvg.duration).attr("d", function (d) {var o = { x: source.x, y: source.y };return funLine({ source: o, target: o });}).remove();

8、样式设置

g.link {fill: none;  // 折线无填充（必须）
}
text {text-anchor: middle; // 水平居中dominant-baseline: central; // 垂直居中
}
rect {stroke-dasharray: 2px; // 虚线stroke-width: 1.5px; // 线粗stroke: #419AFF; // 线颜色
}
circle {r: 8; // 圆半径
}

【d3】树图-各种效果集合（附效果图）相关推荐

JS日历控件集合----附效果图、源代码
在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为重要. 尽管ASP.NET也集成了日历控件,但是其集成的代码量很大,你可以做一个测试,当你在页面使用一个日历控件时,在发 ...
[微信小程序]物流信息样式加动画效果(源代码附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 效果图片:(信息仅为示例)  ...
html 翻页效果,JavaScript实现翻页功能(附效果图)
效果图: 要点: displayPage('#pageDiv','goPage','query',10,1,100); #pageDiv是显示翻页的div名称. goPage是跳转到后面的文本输入框的 ...
Web 开发中很实用的10个效果【附源码下载】
在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...
html绘图环境,HTML_HTML5 在canvas中绘制文本附效果图，一、绘制文本在绘图环境中提 - phpStudy...
HTML5 在canvas中绘制文本附效果图一.绘制文本在绘图环境中提供了两种方法在canvas中绘制文本. strokeText(text,x,y) : 在(x,y)处绘制空心的文本. fill ...
安卓开发中非常炫的效果集合
安卓开发中非常炫的效果集合这几天开发的时候,想做一些好看而且酷炫的特效,于是又开始从网上收集各种特效资源.下面给大家一些我喜欢的把,附代码,喜欢的看源代码,然后加到自己项目去把!! 一个开源项目网站 ...
精选12个时尚的 CSS3 效果【附源码下载】
精选12个时尚的 CSS3 效果[附源码下载] 这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果 ...
水波纹效果，附工程源码
2019独角兽企业重金招聘Python工程师标准>>> 实现的一个水波纹效果,附工程代码. 这个可以用任意图片响应触屏事件显示波纹效果. 很多方面都能用得上,比如动态桌面,游戏,水族 ...
8个前沿的 HTML5 CSS3 效果【附源码下载】
作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...
酷毙了！三种风格的全屏幻灯片效果【附源码下载】
今天,我们想向您展示如何创建平铺背景图像的幻灯片效果.其灵感来自于国外的一个工作室网站(围观),这个网站充满了各种有趣和创意效果,一定记得去看看. 这个幻灯片效果是由四个区域的独立移动构成,通过画面分 ...