html5脑图_HTML5 D3.js 树形结构动画示范(可绘制脑图)
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
$.get('/uploads/1811/realOntology.json').done(function(data) {
jsonToD3(data);
});
// Helper functions
function jsonToD3(data) {
// taken from:
// http://bl.ocks.org/mbostock/4063582
// http://bl.ocks.org/mbostock/4339083
var container = document.getElementById('d3Frame');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
var margin = {
top: 5,
right: 120,
bottom: 5,
left: 120
};
var width = 960 - margin.right - margin.left;
var height = 500 - margin.top - margin.bottom;
var i = 0,
duration = 500;
var root = data;
var tree = d3.layout.tree().size([height, width]);
var diagonal = d3.svg.diagonal().projection(function(d) {
return [d.y, d.x];
});
var svg = d3.select("#d3Frame").append("svg")
.attr("width", '100%').attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
root.x0 = height / 2;
root.y0 = 0;
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
root.children.forEach(collapse);
update(root);
d3.select('#d3Frame').style("height", "500px");
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) {
d.y = d.depth * 180;
});
// Update the nodes…
var node = svg.selectAll("g.node").data(nodes, function(d) {
return d.id || (d.id = ++i);
});
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g").attr("class", "node").attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
}).on("click", click);
nodeEnter.append("circle").attr("r", 1e-6).style("fill", function(d) {
return d._children ? "lightsteelblue" : "#fff";
});
nodeEnter.append("text").attr("x", function(d) {
return d.children || d._children ? -10 : 10;
}).attr("dy", ".35em").attr("text-anchor", function(d) {
return d.children || d._children ? "end" : "start";
}).text(function(d) {
return d.name;
}).style("fill-opacity", 1e-6);
// Transition nodes to their new position.
var nodeUpdate = node.transition().duration(duration).attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")";
});
nodeUpdate.select("circle").attr("r", 4.5).style("fill", function(d) {
return d._children ? "lightsteelblue" : "#fff";
});
nodeUpdate.select("text").style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition().duration(duration).attr("transform", function(d) {
return "translate(" + source.y + "," + source.x + ")";
}).remove();
nodeExit.select("circle").attr("r", 1e-6);
nodeExit.select("text").style("fill-opacity", 1e-6);
// Update the links…
var link = svg.selectAll("path.link").data(links, function(d) {
return d.target.id;
});
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g").attr("class", "link").attr("d", function(d) {
var o = {
x: source.x0,
y: source.y0
};
return diagonal({
source: o,
target: o
});
});
// Transition links to their new position.
link.transition().duration(duration).attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition().duration(duration).attr("d", function(d) {
var o = {
x: source.x,
y: source.y
};
return diagonal({
source: o,
target: o
});
}).remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
}
function exportTreeToJSON(tree) {
this._tree = tree;
var manager = this;
var json = '';
renderBranch(null);
json = '[' + json.substring(0, json.length - 1).replace(/\}\,\]/g, '}]');
json += (json.slice(-1) === "]") ? '}]' : ']';
function renderBranch(parentId) {
for (var i = 0; i < manager._tree.length; i++) {
if (manager._tree[i].parentId == parentId) {
json += JSON.stringify(manager._tree[i]);
// has children
if (findObjectByKey(manager._tree, "parentId", manager._tree[i].id)) {
json = json.substring(0, json.length - 1);
json += ', "children": [';
renderBranch(manager._tree[i].id);
json += ']}';
}
// has siblings
for (var n = 0; n < manager._tree.length; n++) {
if ((manager._tree[n] !== manager._tree[i]) && (manager._tree[n].parentId === manager._tree[i].parentId)) {
json += ',';
break;
}
}
}
}
}
return JSON.parse('{ "name" : "root","children": ' + json + '}');
}
function findObjectByKey(array, key, value) {
for (var i = 0; i < array.length; i++) {
if (array[i][key] === value) {
return array[i];
}
}
return null;
}
html5脑图_HTML5 D3.js 树形结构动画示范(可绘制脑图)相关推荐
- js树形结构html源码,纯JS树形结构插件
插件描述:纯JS树形结构插件,代码精简方便定制修改 更新时间:2020-05-20 22:30:39 更新说明:内含旧版.新版源码更新功能: 1.简化全部代码,从660行减少为430行 2.优化实现思 ...
- js树形结构数组扁平化
js树形结构数组扁平化 1. 树形结构 ---- > 扁平化数据 一.树形结构 ---- > 扁平化数据 (数据) const newData: any = [{"id" ...
- arcgis js 4 使用d3.js 构建虚线动画 (线或者面)
我们来用d3.js 来实现动画虚线 可以应用于polyline 首先数据结构定义 let options = { renderer: { type: "simple", symbo ...
- d3.js实现股权穿透图(vue+d3.js)
d3.js实现股权穿透图 业务需求 1.实现的效果图 2.安装依赖 3.全部代码(复制粘贴即可实现) 参考git地址 业务需求 前段时间写过一篇使用relation-graph插件实现的股权穿透图效果 ...
- D3.js实现带动画效果的柱状图
先上效果图,如下图所示: <!DOCTYPE html> <html lang="zh-cn"><head><meta charset=& ...
- R语言ggplot2可视化:水平半小提琴图(Horizontal Half Violin Plots)、去除水平半小提琴图中的填充色、ggridges包的绘制山脊图
R语言ggplot2可视化:水平半小提琴图(Horizontal Half Violin Plots).去除水平半小提琴图中的填充色.ggridges包的geom_density_ridges函数绘制 ...
- echarts 雷达图_【带着canvas去流浪】绘制雷达图
使用原生canvasAPI绘制雷达图.(截图以及数据来自于百度Echarts官方示例库[查看示例链接]). 二. 重点提示 雷达图绘制的看起来并不复杂,无非就是一些路径点的连线,其中的难点都在于一些细 ...
- python动态横道图_详细解说Python使用Plotly绘图工具,绘制甘特图
今天来讲一下如何使用Python 的绘图工具Plotly来绘制甘特图的方法 甘特图大家应该了解熟悉,就是通过条形来显示项目的进度.时间安排等相关情况的. 我们今天来学习一下,如何使用ployly来绘制 ...
- python计算平均值画折线图_【Python数据分析】一、matplotlib绘制折线图
matplotlib是最流行的Python会图库,主要做数据可视化图表. 本节目标:学习绘制折线图(plt.plot) 设置图片的大小和分辨率(plt.figure) 实现图片的保存(plt.save ...
最新文章
- Educational Codeforces Round 54
- SQL Server-聚焦SNAPSHOT基于行版本隔离级别详解(三十)
- 解压Ubuntu的initrd.img的方法
- MySQL配置全文索引
- c 是泛型程序设计语言,c ++中的“泛型编程”是什么意思?
- 【树莓派学习笔记】九、C语言寄存器操作控制GPIO
- alien指令 linux,使用alien命令让deb包和rpm包互相转换
- 小北思维|前端新技术 VS 你的认知
- Tomcat系列(6)——Tomcat处理一个HTTP请求的过程
- 力扣题目系列:204. 计数质数
- java工作流(原生)
- ios获取本地音乐库音乐很详细
- Chrome源码chromium下载编译详细步骤
- GNN algorithms(3): Tri-party Deep Network Representation
- 两代 Windows 性能大比拼!Win8 完胜 Win7
- 用google突破图书馆入口IP限制小技巧
- IDEA中同窗口导入新的maven项目
- 富文本编辑vue插件vue-quill-editor
- 命令计算机组装机器人,一种计算机组装机器人的制作方法
- JAVA生成心跳曲线图