2. 程式人生 > >D3.js實現節點摺疊+閃爍+葉節點形狀改變的demo

D3.js實現節點摺疊+閃爍+葉節點形狀改變的demo

阿新 • • 發佈：2019-02-13
var treeData = [ { "name": "Top Level", "parent": "null", "value": 10, "children": [ { "name": "Level 2: A", "parent": "Top Level", "value": 10, "children": [ { "name": "Son of A", "parent": "Level 2: A", "value"
: 5 }, { "name": "Daughter of A", "parent": "Level 2: A", "value": 5 }, ] }, { "name": "Level 2: B", "parent": "Top Level", "value": 5 }, { "name": "Level 2: C", "parent"
: "Top Level", "value": 5 }, ] } ]; // ************** Generate the tree diagram ***************** //定義樹圖的全域性屬性（寬高） var margin = {top: 20, right: 120, bottom: 20, left: 120}, width = 960 - margin.right - margin.left, height = 500 - margin.top - margin.bottom; var i = 0, duration = 750
,//過渡延遲時間 root; 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("body").append("svg") .attr("width", width + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); root = treeData[0];//treeData為上邊定義的節點屬性 root.x0 = height / 2; root.y0 = 0; update(root); d3.select(self.frameElement).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.設定y座標點，每層佔180px nodes.forEach(function(d) { d.y = d.depth * 180; }); // Update the nodes…每個node對應一個group var node = svg.selectAll("g.node") .data(nodes, function(d) { return d.id || (d.id = ++i); });//data()：繫結一個數組到選擇集上，陣列的各項值分別與選擇集的各元素繫結 // Enter any new nodes at the parent's previous position.新增節點資料集，設定位置 var nodeEnter = node.enter().append("g") //在 svg 中新增一個g，g是 svg 中的一個屬性，是 group 的意思，它表示一組什麼東西，如一組 lines ， rects ，circles 其實座標軸就是由這些東西構成的。 .attr("class", "node") //attr設定html屬性，style設定css屬性 .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) .on("click", click); //新增連線點---此處設定的是圓圈過渡時候的效果（顏色） // nodeEnter.append("circle") // .attr("r", 1e-6);//d 代表資料，也就是與某元素繫結的資料。 nodeEnter.append("path") .style("stroke-width", "2px") .style("stroke", "#4682b4") .style("fill", "white") .attr("d", d3.svg.symbol() .size(function(d){ if (d.value <= 9) { return "400"; } else if (d.value >= 9) { return "400";} }) .type(function(d) { if (d.value <= 9) { return "triangle-up"; } else if (d.value >= 9) { return "circle";} })) .attr('class',function(d){ if(d.value <= 9 ){ return 'bling'; }else{ return 'fill_normal'; } }); //新增標籤 nodeEnter.append("text") .attr("x", function(d) { return d.children || d._children ? -13 : 13; }) .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.將節點過渡到一個新的位置-----主要是針對節點過渡過程中的過渡效果 //node就是保留的資料集，為原來資料的圖形新增過渡動畫。首先是整個組的位置 var nodeUpdate = node.transition() //開始一個動畫過渡 .duration(duration) //過渡延遲時間,此處主要設定的是圓圈節點隨斜線的過渡延遲 .attr("r", 10) .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); //更新連線點的填充色 // nodeUpdate.select("circle") // .attr("r", 10) // .attr('class',function(d){ // if(d.value <= 9){ // return 'bling'; // }else{ // return 'fill_normal'; // } // }); nodeUpdate.select("path") .style("stroke-width", "2px") .style("stroke", "#4682b4") .style("fill", "white") .attr("d", d3.svg.symbol() .size(function(d){ if (d.value <= 9) { return "400"; } else if (d.value >= 9) { return "400";} }) .type(function(d) { if (d.value <= 9) { return "triangle-up"; } else if (d.value >= 9) { return "circle";} })) .attr('class',function(d){ if(d.value <= 9 ){ return 'bling'; }else{ return 'fill_normal'; } }); 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}); //diagonal - 生成一個二維貝塞爾聯結器, 用於節點連線圖. }) .style("stroke",function(d){ //d包含當前的屬性console.log(d) return '#ccc'; }); // 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); }

相關推薦

D3.js實現節點摺疊+閃爍+葉節點形狀改變的demo

var treeData = [ { "name": "Top Level", "parent": "null", "value": 10, "children": [ { "name": "Level 2: A", "par

d3.js實現雙擊刪除節點並刪除節點上的文字

最近專案遇到一個問題：刪除節點，節點上的文字卻無法刪除。 經過F12的除錯，我發現原來自己寫的節點、連線、文字分別包裹在不同的g標籤內。 於是出現了兩種解決方案： （1）把文字依附在節點上 （2）選中節點的時候遍歷文字確保是哪個文字和該節點是對應的 我個人認為第一種

D3.js 使用縮放zoom時節點無法拖動，只能整體移動的問題

func blank on() sta blog function targe light event .on("dragstart", function() { d3.event.sourceEvent.stopPropagation();

[C/C++] 先序建立二叉樹| 先序、中序、後序遍歷二叉樹| 求二叉樹深度、節點數、葉節點數 演算法實現

/* * BinTree.h */ #define TRUE 1 #define FALSE 0 #define OK 1 #define ERROR 0 #define INFEASIBLE -1 #defi

D3.js實現帶動畫效果的柱狀圖

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content

基於cytoscape.js 、 d3.js實現的關係圖譜初級版本

前面的文章已經介紹了cytoscape.js 、 d3.js的安裝及簡單demo，現在展示從html頁面轉移到vue專案下的最初版的demo 效果圖：   程式碼如下： <template> <div style="width: 100%;height:

js實現單個div閃爍

function changeBorder(obj){ var timer = null; var i = 0; clearInterval(timer); obj.

資料視覺化 D3.js實現力導向圖之二（node帶文字說明和提示）

從官方下載下的demo，直接加text帶文字，始終未能顯示出來，但是title卻能顯示出來，最後經過與網上其他地方做出來的例子用firebug進行跟蹤對比，發現能夠正確顯示title的html裡邊g標籤為node裡邊包含circle和text(circle、title和te

d3.js 實現svg 縮放 平移 旋轉

使用d3.js的時候，可能會需要對生成svg物件進行平移，旋轉，縮放等操作 可以使用矩陣變換來進行座標系下的轉化，但是矩陣運算相對複雜。d3提供了相應的svg變換介面。 包括： translate() , scale() , rotate() , skewX() , an

原生js實現清除子元素節點

spa class document cnblogs ech child mov log tor var table = document.body.querySelector(‘.mui-table-view‘);

Vue學習之原始碼分析--VNode節點(Vue.js實現（五）

抽象DOM樹 在刀耕火種的年代，我們需要在各個事件方法中直接操作DOM來達到修改檢視的目的。但是當應用一大就會變得難以維護。 那我們是不是可以把真實DOM樹抽象成一棵以JavaScript物件構成的抽象樹，在修改抽象樹資料後將抽象樹轉化成真實DOM重繪到頁面

d3.js多重力導向圖多條關係線，mouseover只顯示相關節點

直接上效果圖滑鼠移至節點不相連節點變暗程式碼如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><script src="http://d3js.org/d3.v3.mi

原生js實現節點拖拽

var Drags = function (element, callback) { callback = callback || function () {}; var params = {

如何實現echarts組織結構圖節點的收縮

點名 3.0 不讓 信息 修改 conf strong 值引用 option echarts本身沒有組織結構圖的節點收縮功能，因為項目需求要用到此功能。 引入的echarts必須是2版本的，因為3.0取消了對組織結構圖的支持。下載2版本的源碼，找到關於onclick事件那部

5月25日-js操作DOM遍歷子節點

bsp 單選 function nbsp 選擇 ngs pan alert find() 一、遍歷節點 遍歷子節點 children();//獲取節點的所有直接子類 遍歷同輩節點 next(); prev()

在EasyUI實現點擊有子節點的文字時展開但不選中，點擊最終子節點才選中的功能

nload 容易 事件 data strong 中項 eight spa 清除 最近做的項目中，總是會遇到需要實現點擊樹目錄的有子節點時展開目錄，點擊最終子節點才實現選中的功能的需求。下邊我就直接黏貼一下代碼出來吧，非常容易看懂，關鍵的就是在選中事件中加一個判斷。

[js高手之路] dom常用節點屬性兼容性詳解與應用

asc 子元素 種類型 process 變色 tex 如果 結構 節點和 一、每個DOM節點都有一個nodeType屬性，表示節點類型， NodeType一共有12種類型，我們可以通過遍歷內置的Node構造函數獲取 1 window.onload =

js操作DOM對象（節點的增刪改）

pre charset char body creat title 替換 type script <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"&

JS編程練習：將目標節點內部的子節點逆序

this back type 節點 nts on() ext proto es2017 將目標節點內部的子節點逆序 1 <body> 2 <div> 3 <p></p> 4

qt 畫多邊形（實現鼠標拖動節點）

開始 ack set eee del upd tip update lob ---恢復內容開始--- 2018-01-06 這個小例子實現了移動鼠標，鼠標的坐標信息跟隨鼠標移動，多邊形的實現，鼠標點擊可以拖動多邊形點的位置，（其中有個問題？我在QMainWi