dagre-d3 基于d3.js v3版本以上

基于d3 v3 和 v4 的变化

https://github.com/dagrejs/dagre-d3/commit/ebbb84f03bd169061f40d7a1df82cb3b51860187

弹窗 tipsy.js tipsy.css

https://blog.csdn.net/czy279470138/article/details/90240610

基于d3.v3

dagre-d3 引入0.3.0 版本

直线变曲线 lineInterpolate: 'basis'

默认矩阵，可以设置为圆 shape: "circle"

默认为矩阵可以变为圆椭圆四边形

g.setNode("rect", { shape: "rect" });
g.setNode("circle", { shape: "circle" });
g.setNode("ellipse", { shape: "ellipse" });


<!doctype html><meta charset="utf-8">
<title>dagre-v3.3x</title><script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!--<script src="https://cdn.bootcss.com/dagre-d3/0.4.18/dagre-d3.js"></script>-->
<!--<script src="https://cdn.bootcss.com/dagre-d3/0.5.0/dagre-d3.js"></script>-->
<!--<script src="https://cdn.bootcss.com/dagre-d3/0.4.17/dagre-d3.js"></script>-->
<script src="http://www.samsarin.com/project/dagre-d3/v0.3.0/dagre-d3.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="tipsy.css">
<script src="tipsy.js"></script>
<style id="css">text {font-weight: 300;font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;font-size: 14px;}.node rect {stroke: #333;fill: #fff;}.edgePath path {stroke: #333;fill: #333;stroke-width: 1.5px;}.node text {pointer-events: none;}.node circle{stroke: #333;fill: #fff;}/* This styles the title of the tooltip */.tipsy .name {font-size: 1.5em;font-weight: bold;color: #60b1fc;margin: 0;}/* This styles the body of the tooltip */.tipsy .description {font-size: 1.2em;}
</style><svg width=960 height=1000></svg><script>// Create a new directed graphvar g = new dagreD3.graphlib.Graph().setGraph({ rankdir: 'BT' });// States and transitions from RFC 793var states = {"circle":{ shape: "circle",description: "represents no connection state at all." },Start: {style: "fill: #f77"},"JW002": {description: "represents no connection state at all."},"JW003": {description: "represents no connection state at all."},"JW004": {},"JW005": {description: "represents no connection state at all."},"JW006": {description: "represents no connection state at all."},"JW007": {},"JW008": {},"JW009": {},"JW010": {},"JW011": {},"JW012": {},"JW013": {},"JW014": {},"JW015": {},"JW016": {},"End": {}};// Add states to the graph, set labels, and styleObject.keys(states).forEach(function(state) {var value = states[state];value.label = state;value.rx = value.ry = 5;g.setNode(state, value);});// Set up the edgesg.setEdge("circle",     "JW002",     { label: "open", lineInterpolate: 'basis' });g.setEdge("Start",   "JW003",      { label: "rcv ACK of SYN", lineInterpolate: 'basis'  });g.setEdge("Start",   "JW004",   { label: "rcv SYN", lineInterpolate: 'basis'  });g.setEdge("JW002",   "JW005",      { label: "rcv SYN, ACK", lineInterpolate: 'basis'  });g.setEdge("JW002",   "JW006",     { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW003",      "JW006",  { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW003",      "JW007",  { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW004",      "JW008",  { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW004",      "JW009",  { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW005",      "JW010",  { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW005",      "JW011",  { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW005",      "JW012",  { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW006",      "JW013",  { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW007",      "JW014",  { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW007",      "JW015",  { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW008",      "JW016",  { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW009",      "JW015",  { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW009",      "JW016",  { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW010",      "End",  { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW011",      "End",  { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW012",      "End",  { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW013",      "End",  { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW014",      "End",  { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW015",      "End",  { label: "close", lineInterpolate: 'basis'  });g.setEdge("JW016",      "End",  { label: "close", lineInterpolate: 'basis'  });// Create the renderervar render = new dagreD3.render();// Set up an SVG group so that we can translate the final graph.var svg = d3.select("svg"),inner = svg.append("g");// Set up zoom supportvar zoom = d3.behavior.zoom().scaleExtent([0.1, 100]).on("zoom", function() {inner.attr('transform',"translate(" + d3.event.translate + ")" +"scale(" + d3.event.scale + ")")});svg.call(zoom);// Simple function to style the tooltip for the given node.var styleTooltip = function(name, description) {return "<p class='name'>" + name + "</p><p class='description'>" + description + "</p>";};// Run the renderer. This is what draws the final graph.render(inner, g);inner.selectAll("g.node").attr("title", function(v) { return styleTooltip(v, g.node(v).description) }).each(function(v) { $(this).tipsy({ gravity: "w", opacity: 1, html: true }); });</script>

dagre-d3 基于d3.js v3版本以上相关推荐

D3.js(v3版本）
D3.js <script src="https://d3js.org/d3.v6.min.js"></script> import * as d3 fro ...
d3.js v3版本实现-树状图
参考的例子:http://bl.ocks.org/robschmuecker/7880033 一.为什么选择d3.js 二.d3.js概述三:树状图实现 1.创建svg 2.在svg元素里面画一个g ...
D3.js绘制颜色:RGB、HSL和插值 (V3版本)
转载地址:D3.js绘制颜色:RGB.HSL和插值 (V3版本) 如果要计算介于两个颜色之间的颜色,需要用到插值(Interpolation).D3提供了d3.intrerpolateRgb()来处 ...
D3 v3版本绘制力导向图更新节点时JS控制台报错：Error: circle attribute cx: Expected length, NaN解决办法
D3的v3版本,很古老了. 拿来绘制力导向图,画布初始化的代码如下: //代码不完整,仅作演示以说明问题 //节点数组var nodes = [ { name: "sssss" , ...
D3.js(v3)+react 制作一个带坐标与比例尺的散点图 (V3版本)
上一章做了柱形图,https://www.cnblogs.com/littleSpill/p/10835041.html 这一章做散点图. 散点图(Scatter Chart),通常是一横一竖两个 ...
链接neo4j图形数据库的图像化显示（基于d3.js/neovis.js/neod3.js）
一.基于D3.js (自由度高,写起来麻烦) 二.基于neovis.js (基于d3库,简洁,但样式固定,自由度低.) 三.基于neo4jd3.js (融合neovis与d3,数据格式可用d3\neo ...
基于D3.js实现分类多标签的Tree型结构可视化
全文共5270个字,4张图,预计阅读时间25分钟. 关键词: 可视化,D3.js,python,前端,代码 why 今天新来的实习生需要对部分分类文本进行多标签的检测,即根据已构建好的一.二级标签Ex ...
基于vue的组织架构树组件_Vue组件基于D3.js布局显示树
基于vue的组织架构树组件 Vue.D3.tree (Vue.D3.tree) Update documentationVue components to display graphics based ...
svg操纵方案基于 D3 还是 angular？
之前还是想简单了, 现在重新写这篇.把逻辑拆分粒度的辨析,放到外面去. 问题提出:svg控制方案基于 D3 还是 angular 根据这个,html 4种展现样式:普通的html,svg,2D ca ...

dagre-d3 基于d3.js v3版本以上

dagre-d3 基于d3.js v3版本以上相关推荐

最新文章

热门文章