dagre-d3改变边的方向
如图：
改为（即橘色和绿色每隔一个，则相应的部分就换个方向，朝下或朝上）：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
g.type-start > circle {
fill: #ffffff;
}
g.type-one > circle {
fill: #ff8000;
}
g.type-two > circle {
fill: #92d050;
}
g.type-end > circle {
fill: #000000;
}
text {
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px;
}
.node circle {
stroke: #999;
fill: #fff;
stroke-width: 1.5px;
}
.edgePath path {
stroke: #333;
stroke-width: 1.5px;
}
.tooltip {
position: absolute;
font-size: 12px;
text-align: center;
background-color: white;
border-radius: 3px;
box-shadow: rgb(174, 174, 174) 0px 0px 10px;
cursor: pointer;
display: inline-block;
padding: 10px;
}
.tooltip > div {
padding: 10px;
}
</style>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://cpettitt.github.io/project/dagre-d3/v0.3.0/dagre-d3.min.js"></script>
<script src=" http://d3js.org/d3.v3.min.js "></script>
<!-- <script src="https://d3js.org/d3-zoom.v1.min.js"></script> -->
<body>
<div id="tooltip" class="hidden">
<p><strong>Story Forest</strong></p>
<p><span id="tooltip_value" class="hidden"></span></p>
</div>
<svg id="svg-canvas" width=1500 height=500></svg>
</body>
<script>
var dataFlow = [{
id: 0,
label: 'S',
status: 'start',
target: [1],
back_target: null,
time: "2018/12/1",
value: "",
position: [[9, 11]],
keyWord: [""]
}, {
id: 1,
label: 'e1',
status: 'one',
target: [2],
back_target: null
}, {
id: 2,
label: 'e1',
status: 'two',
target: [3, 4],
back_target: null
}, {
id: 3,
label: 'e2',
status: 'two',
target: null,
back_target: null
}, {
id: 4,
label: 'e1',
status: 'one',
target: [5, 10],
back_target: null
}, {
id: 5,
label: 'e2',
status: 'one',
target: [6],
back_target: null
}, {
id: 6,
label: 'e3',
status: 'one',
target: [7, 8],
back_target: null
}, {
id: 7,
label: 'e4',
status: 'one',
target: null,
back_target: null
}, {
id: 8,
label: 'e5',
status: 'one',
target: [9],
back_target: null
}, {
id: 9,
label: 'e6',
status: 'one',
target: null,
back_target: null
}, {
id: 10,
label: 'e1',
status: 'two',
target: [11,13],
back_target: null,
description: 'll'
}, {
id: 11,
label: 'e3',
status: 'two',
target: [12],
back_target: null,
description: 'll'
}, {
id: 12,
label: 'e4',
status: 'two',
target: null,
back_target: null,
description: 'll'
}, {
id: 13,
label: 'e1',
status: 'one',
target: null,
back_target: null,
description: 'll'
}]
//添加鼠标滚轮放大缩小事件
// Create the input graph
var g = new dagreD3.graphlib.Graph()
.setGraph({
rankdir: 'LR',
align: 'DR',
ranksep: 90,
})
.setDefaultEdgeLabel(function () {
return {};
});
dataFlow && dataFlow.map((item, i) => {
g.setNode(item.id, {
label: item.label,
shape: "circle",
class: "type-" + item.status,
// id: "status" + i
description: item.description,
x: 10,
y: 10 * i,
});
// Set up edges, no special attributes.
if (item.target) {
for (var i in item.target) {
if (dataFlow[item.target[i]].label === 'e1') {
g.setEdge(item.id, item.target[i], {
style: "fill:black;stroke-width: 2.5px;stroke:balck",
arrowheadStyle: "fill:black;stroke-width: 0.5px;stroke:black"
})
} else {
// maybe set edge right here
g.setEdge(item.id, item.target[i], {})
}
}
}
})
// Create the renderer
var render = new dagreD3.render();
// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg"),
svgGroup = svg.append("g");
render(d3.select("svg g"), g);
//整个页面背景色
d3.select("body").style("background-color", "#ffffff");
//鼠标悬停节点事件
g.nodes().forEach(function (v) {
var node = g.node(v);
console.log(node)
});
g.edges().forEach(function (v) {
var node = g.edge(v);
console.log(node)
});
svgGroup.selectAll("g.node").on('mouseover', function (v) {
d3.select(this).attr("fill", "#000000").append("title").text(function (d) {
var textValue = "";
var gposition = dataFlow[d].position
var content = dataFlow[d].value
// console.log(gposition)
for (let j = gposition.length - 1; j >= 0; j--) {
var item = gposition[j]
if (item === null) {
continue
} else {
var start = item[0]
var end = item[1]
content = content.slice(0, start) + `<b style="Color: ${'rgb(100,100,171)'}" >${content.substring(start, end)}</b>` + content.slice(end);
}
}
return dataFlow[d].time + `<br>` + content;
}).attr("id", "tooltip");
});
svgGroup.selectAll("g.node").on('mouseout', function (v) {
d3.select(this).attr("fill", "rgb(0,0," + (v * 10) + ")");
d3.select("#tooltip").remove();
});
var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
console.log(xCenterOffset)
svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");
svg.attr("height", g.graph().height + 40);
</script>
</html>