用D3畫簡單的力導圖

阿新 • • 發佈：2019-01-16

var forceTree3 = function(setting) {


    var relations = setting.relations,
        links = setting.links,
        selector = setting.selector
    var nodes = {}

    // 上傳到伺服器需要修改
    var pathUrl = '/'

    d3.select(selector).selectAll('svg').remove()


    links.forEach(function(link) {

        link.source  
= nodes[link.source] || (nodes[link.source] = {
            name: link.source
        })

        link.target = nodes[link.target] || (nodes[link.target] = {
            name: link.target
        })

        link.aa = '11'
    });

    var width = 960,
        height = 960;

    var force = d3.layout.force()
        .nodes(d3.values(nodes))
        .links(links)
        .size([width, height])
        .linkDistance( 
160)
        .charge(-600)
        .on("tick", tick)
        .start();

    var svg = d3.select(selector).append("svg")
        .attr("width", width)
        .attr("height", height);


    var link = svg.selectAll(".link")
        .data(force.links())
        .enter().append("line")
        .attr( 
"class", "link");

    var color = ['#1a1925', '#042c3b', '#1f242b']
    var lineColor = ['#ff7e00', '#e8b93e']

    link.style("stroke", function(d) {

            var source = d.target.name,
                isShow,
                lineObj = d3.select(this)[0][0]

            for (var i = 0; i < relations.length; i++) {

                if (relations[i].obj == source) {

                    isShow = relations[i].show
                }
            }

            if (isShow) {

                return lineColor[d.level]
            } else {
                return '#1c346b'
            }

        })
        .style("stroke-width", 2)

    var node = svg.selectAll(".node")
        .data(force.nodes())
        .enter().append("g")
        .attr("class", "node")
        /*        .on("mouseover", mouseover)
                .on("mouseout", mouseout)*/
        .call(force.drag);

    node.append("circle")
        .attr('r', function(d, i) {
            
            var dname = d.name,
                isShow,
                index,
                cirlceObj = d3.select(this)[0][0]

            for (var i = 0; i < relations.length; i++) {

                if (relations[i].obj == dname) {
                    index = relations[i].index
                    isShow = relations[i].show
                }
            }

            if (index === 0) {

                return 28
            } else if (index === 1) {
                return 26
            } else if (index === 2) {
                return 15
            }
        })
        .style("fill", function(d) {

            var dname = d.name,
                isShow,
                cirlceObj = d3.select(this)[0][0]

            for (var i = 0; i < relations.length; i++) {

                if (relations[i].obj == dname) {

                    isShow = relations[i].show
                }
            }

            if (isShow) {

                return color[d.index]
            } else {

                return '#1c346b'
            }
        })

    node.append("svg:image")
        .attr("class", "image")
        .attr("xlink:href", function(d, i) {

            var dname = d.name,
                index,
                isDrawImg,
                imageObj = d3.select(this)[0][0]

            for (var i = 0; i < relations.length; i++) {

                if (relations[i].obj == dname) {

                    index = relations[i].index
                    isDrawImg = relations[i].show
                }
            }

            $(imageObj).data('showBig', true)

            if (isDrawImg) {

                if (index == 0) {

                    return "images/mProject.png"
                } else if (index == 1) {

                    return "images/mCompany.png"
                } else if (index == 2) {

                    return "images/mPerson.png"
                }

            } else {

                return ''
            }
        })
        .on('click', function(d, i) {

            var obj = d3.select(this)

            var dname = d.name,
                index,
                isCanClick,
                imageObj = d3.select(this)[0][0],
                showBig = $(imageObj).data('showBig')

            for (var i = 0; i < relations.length; i++) {

                if (relations[i].obj == dname) {

                    index = relations[i].index
                    isCanClick = relations[i].show
                }
            }

            if (isCanClick) {

                if (showBig) {

                    if (index == 0) {

                        d3.select(this)
                            .attr('xlink:href', "images/project.png")
                    } else if (index == 1) {

                        d3.select(this)
                            .attr('xlink:href', "images/company.png")
                    } else if (index == 2) {

                        d3.select(this)
                            .attr('xlink:href', "images/person.png")
                    }
                    d3.select(this)
                        .attr('width', '124px')
                        .attr('height', '124px')
                        .attr("x", "-62px")
                        .attr("y", "-62px")

                    var circle = $(this).parent().find('circle')[0]

                    $(imageObj).data('showBig', false)

                    d3.select(circle).attr('r', 62)

                } else {

                    if (index === 0) {

                        d3.select(this)
                            .attr("x", "-32px")
                            .attr("y", "-32px")
                            .attr("width", "64px")
                            .attr("height", "64px")
                            .attr('xlink:href', "images/mProject.png")
                    } else if (index === 1) {

                        d3.select(this)
                            .attr("x", "-31px")
                            .attr("y", "-31px")
                            .attr("width", "62px")
                            .attr("height", "62px")
                            .attr('xlink:href', "images/mCompany.png")
                    } else if (index === 2) {

                        d3.select(this)
                            .attr("x", "-15px")
                            .attr("y", "-15px")
                            .attr("width", "30px")
                            .attr("height", "30px")
                            .attr('xlink:href', "images/mPerson.png")
                    }

                    var circle = $(this).parent().find('circle')[0]

                    $(imageObj).data('showBig', true)

                    d3.select(circle).attr('r', function() {

                        if (index === 0) {

                            return 28
                        } else if (index === 1) {
                            return 26
                        } else {
                            return 15
                        }
                    })

                }
            } else {

                var confirm = window.confirm("確認開通VIP通道")

                if (confirm && showBig) {

                    if (index === 0) {

                        d3.select(this)
                            .attr("x", "-32px")
                            .attr("y", "-32px")
                            .attr("width", "64px")
                            .attr("height", "64px")
                            .attr('xlink:href', "images/mProject.png")
                    } else if (index === 1) {

                        d3.select(this)
                            .attr("x", "-31px")
                            .attr("y", "-31px")
                            .attr("width", "62px")
                            .attr("height", "62px")
                            .attr('xlink:href', "images/mCompany.png")
                    } else if (index === 2) {

                        d3.select(this)
                            .attr("x", "-15px")
                            .attr("y", "-15px")
                            .attr("width", "30px")
                            .attr("height", "30px")
                            .attr('xlink:href', "images/mPerson.png")
                    }

                    var circle = $(this).parent().find('circle')[0]

                    $(imageObj).data('showBig', true)

                    d3.select(circle).attr('r', function() {

                        if (index === 0) {

                            return 28
                        } else if (index === 1) {
                            return 26
                        } else {
                            return 15
                        }
                    })

                } else {

                }
            }
        })
        .attr("x", function(d,i) {

            var dname = d.name,
                index,
                isCanClick,
                imageObj = d3.select(this)[0][0]

            for (var i = 0; i < relations.length; i++) {

                if (relations[i].obj == dname) {

                    index = relations[i].index
                }
            }

            if (index === 0 ){
                
                return '-32px'
            } else if (index === 1) {

                return '-28px'
            } else if (index === 2) {

                return  '-15px'
            }
        })
        .attr("y",  function(d,i) {

            var dname = d.name,
                index,
                isCanClick,
                imageObj = d3.select(this)[0][0]

            for (var i = 0; i < relations.length; i++) {

                if (relations[i].obj == dname) {

                    index = relations[i].index
                }
            }

            if (index === 0 ){
                
                return '-32px'
            } else if (index === 1) {

                return '-28px'
            } else if (index === 2) {

                return  '-15px'
            }
        })
        .attr("width",  function(d,i) {

            var dname = d.name,
                index,
                isCanClick,
                imageObj = d3.select(this)[0][0]

            for (var i = 0; i < relations.length; i++) {

                if (relations[i].obj == dname) {

                    index = relations[i].index
                }
            }

            if (index === 0 ){
                
                return '64px'
            } else if (index === 1) {

                return '56px'
            } else if (index === 2) {

                return  '30px'
            }
        })
        .attr("height",  function(d,i) {

            var dname = d.name,
                index,
                isCanClick,
                imageObj = d3.select(this)[0][0]

            for (var i = 0; i < relations.length; i++) {

                if (relations[i].obj == dname) {

                    index = relations[i].index
                }
            }

            if (index === 0 ){
                
                return '64px'
            } else if (index === 1) {

                return '56px'
            } else if (index === 2) {

                return  '30px'
            }
        })
        .style('cursor', 'pointer')

    node.append("svg:title")
        .text(function(d) {
            return d.name;
        });

    function tick() { //打點更新座標
        link
            .attr("x1", function(d) {
                return d.source.x;
            })
            .attr("y1", function(d) {
                return d.source.y;
            })
            .attr("x2", function(d) {
                return d.target.x;
            })
            .attr("y2", function(d) {
                return d.target.y;
            });

        node
            .attr("transform", function(d) {
                return "translate(" + d.x + "," + d.y + ")";
            });
    }

    function imageClick() {

        var obj = d3.select(this)

        var dname = d.name,
            index

        for (var i = 0; i < relations.length; i++) {

            if (relations[i].obj == dname) {

                index = relations[i].index
            }
        }

        $(this).data('mIndex', index)

        if (index == 0) {

            d3.select(this)
                .attr('width', '124px')
                .attr('height', '124px')
                .attr('xlink:href', "images/project.png")
        }
    }

    function mouseover() {
        d3.select(this).select("circle").transition()
            .duration(750)
            .attr("r", 60);
    }

    function mouseout() {
        d3.select(this).select("circle").transition()
            .duration(750)
            .attr("r", function(d, i) {

                if (d.index == 0) {

                    return 28
                } else if (d.index == 1) {
                    return 26
                } else {
                    return 15
                }
            })
    }
}

用D3畫簡單的力導圖

var forceTree3 = function(setting) { var relations = setting.relations, links = setting.links, selector = setting.selector

d3 畫簡單的柱形圖

pen oca func vba head 高度 turn cti ret <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-3

用cavas畫一個多邊形的圖

ren nload use .get path TP In document math 1.效果圖： 2.html <canvas id="polygon" width="600" height="600"> <p>Current Price

Python篇：用python畫xy散點圖

python畫xy散點圖測試筆記 import matplotlib.pyplot as plt plt.title("I'm a scatter diagram.") plt.xlim(xmax=7,xmin=0) plt.ylim(ymax=7,ymin=0) plt.anno

力導圖——節點平均分佈（通過固定節點座標）

力導圖——節點平均分佈（通過固定節點座標）效果圖需要的工具包：Echarts.js、force.js (可從Echarts的官網下載) 也可以下載完整的demo 步驟 html模組 <!DOCTYPE html> <html lang=

D3.js建立力導向圖(V4)附帶詳細的引數說明

一.程式碼示例 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport"

D3學習：力導向圖佈局

var nodes = [{name:"盤錦"}, {name:"北票"}, {name:"錦州"}, {name:"瀋陽"},

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

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

用OPENCV畫一個全連線圖和每個邊的中點

分享一個用於畫全連線圖和返回這個全連線圖裡每條變中點的函式 int add_point(vector<Point2f>*obj2,Mat img) { Mat img=img1; Point2f p_obj; int n=ob

用程式碼畫流程圖和時序圖快餐教程(2)

可以嵌入在markdown程式碼中的mermaid mermaid的好處是可以在寫markdown文件的同時，就直接可以畫圖了。下面是我用Haroopad工具直接在markdown中畫流圖的情況：工具下載地址：http://pad.haroopre

[Excel圖表]用excel畫座標散點圖，並新增資料標籤

今天在寫畢業論文的時候發現自己需要畫座標圖，在網上找來找去終於找到了方法，下面是記錄：開啟excel之後填好資料：像這樣，之後選擇要畫的座標點，點選插入散點圖，之後出現的散點圖是這樣的：並沒有達到預期的目的，因為我想讓每個點上都標上序號。開始：首先將散點圖轉換

推薦：js用canvas畫水平曲線走勢圖，圖線自適應垂直高度

主要的畫曲線走勢的js檔案jquery.flot.js，下載地址https://static.bichuang.com/static/front/js/plugin/jquery.flot.js !function(t){t.color={},t.color.make=f

用matlab畫簡單曲線，並進行標註、圖例、加網格，等操作

本人採用的是r2012版本，現簡單的畫兩條曲線，一條正弦、一條餘弦，線寬不同，命名曲線。程式如下： x=0:0.001:2*pi;%建立時間序列 y1=0.5*sin(x);%建立正弦曲線 y2=cos(x);%建立餘弦曲線 %畫對應線寬 plot(x,y1,'r','LineWidth',0.

樹狀思維導圖怎麼畫，思維導圖免費軟體有哪些

1、開啟MindMaster軟體後，在【新建】介面，選擇“樹狀圖”模板，雙擊該模板就可以快速進入繪圖介面; 2、按照正常的思維導圖繪製方法，輸入主題內容，新增下一級主題和子主題; 通過“樹狀圖”模板繪製出來的樹形結構的思維導圖，在新增主題和子主題的時候，會自動按照樹形的結構一層一層進行擴充套件

Vue和d3.js(v4)力導向圖force結合使用，v3版本升級v4【一】

前段時間因為參與專案涉密，所以一直沒有更新部落格，有些博友給我私信或者留言要部分博文的原始碼，因為我的電腦更換，demo的原始碼沒有備份所以無法提供。大家可針對具體問題問我，有空我定會回覆的。另外轉發文章請說明出處，謝謝關注！之前有多篇博文介紹了d3力導向圖的繪製過程的一些問題，現在由於效能和UI的要求，