d3.js 共享交換平臺demo

今天在群里遇到一張圖? 遂來玩一玩，先來上圖!!

點擊相應按鈕，開關線路，此項目的重點是計算相應圖形的位置，由于是個性化項目就沒有封裝布局。好了直接上代碼。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$Title$</title><script src="https://d3js.org/d3.v4.min.js"></script><style>.container {padding: 0 100px;}button {width: 100px;}.rect {stroke: #406DA7;fill: #6693CC;stroke-width: 2;}.center {stroke: #FF3336;fill: #FF7F7E;stroke-width: 2;}.text {fill: #ffffff;text-anchor: middle;font-size: 30px;shape-rendering: crispEdges;}.circle {fill: #ffffff;stroke: #FF7F7E;stroke-width: 2;}.cha {fill: #ffffff;stroke: #FF7F7E;stroke-width: 2;}.dash1 {stroke-dashArray: 15 5;stroke-width: 4;stroke: #6693CC;}.dash2 {stroke-dashArray: 15 5;stroke-width: 4;stroke: #FF7F7E;}.marker1 {fill: none;stroke: #6693CC;stroke-width: 4;}.marker2 {fill: none;stroke: #FF7F7E;stroke-width: 4;}.line {stroke: #6693CC;stroke-width: 4;}</style>
</head>
<body>
<script>var width = 2000;var height = 1200;var margin = 100;var everyW = 280;var leftData = ['上海市城管局','北京市城管局','天津市城管局','重慶市城管局','大慶市城管局','黑河市城管局','雞西市城管局','鶴崗市城管局'];var rightData = ['上海市建筑委','北京市建筑委','天津市建筑委','重慶市建筑委','大慶市建筑委','黑河市建筑委','雞西市建筑委','鶴崗市建筑委'];var everyH = ( height - margin * 2 ) / leftData.length / 2;var scaleL = d3.scaleLinear().domain([0, leftData.length - 1]).range([0, height - margin * 2 - everyH])var scaleR = d3.scaleLinear().domain([0, rightData.length - 1]).range([0, height - margin * 2 - everyH])var text = '共享交換平臺'render();function render() {var svg = d3.select('body').append('svg').attr('width',  1000).attr('height', 600).attr('viewBox', `0, 0, ${width}, ${height}`).attr("preserveAspectRatio", "xMidYMid meet").style('border', '1px solid #777')var defs = svg.append('defs')var cha = defs.append('g').attr('id', 'cha')cha.append('circle').attr('cx', 20).attr('cy', 20).attr('r', 19).attr('class', 'circle')cha.append('path').attr('d', 'M 11 15 L 25 31 A 3 3 0 0 0 29 25 L 15 9 A 3 3 0 0 0 11 15 Z').attr('class', 'cha')cha.append('path').attr('d', 'M 29 15 L 15 31 A 3 3 0 0 1 11 25 L 25 9 A 3 3 0 0 1 29 15 Z').attr('class', 'cha')var markerA1 = defs.append('g').attr('id', 'markerA1')markerA1.append('line').attr('x1', everyW + 2).attr('y1', everyH / 2).attr('x2', everyW * 1 / 4 + width / 4 - margin / 2).attr('y2', everyH / 2).attr('class', 'dash1')var markerA2 = defs.append('g').attr('id', 'markerA2')markerA2.append('line').attr('x1', everyW + 2).attr('y1', everyH / 2).attr('x2', everyW * 1 / 4 + width / 4 - margin / 2).attr('y2', everyH / 2).attr('class', 'dash2')markerA2.append('use').attr('x', everyW * 5 / 8 + width / 8 - margin / 4 - 20).attr('y', everyH / 2 - 20).attr('xlink:href', '#cha')var markerB1 = defs.append('g').attr('id', 'markerB1')markerB1.append('line').attr('x1', everyW * 3 / 4 - width / 4 + margin  / 2).attr('y1', everyH / 2).attr('x2', -10).attr('y2', everyH / 2).attr('class', 'dash1')markerB1.append('path').attr('d', `M -30 ${everyH / 2 - 16} L -10 ${everyH / 2} L -30 ${everyH / 2 + 16}`).attr('class', 'marker1')var markerB2 = defs.append('g').attr('id', 'markerB2')markerB2.append('line').attr('x1', everyW * 3 / 4 - width / 4 + margin  / 2).attr('y1', everyH / 2).attr('x2', -10).attr('y2', everyH / 2).attr('class', 'dash2')markerB2.append('path').attr('d', `M -30 ${everyH / 2 - 16} L -10 ${everyH / 2} L -30 ${everyH / 2 + 16}`).attr('class', 'marker2')markerB2.append('use').attr('x', everyW * 3 / 8 - width / 8).attr('y', everyH / 2 - 20).attr('xlink:href', '#cha')var body = svg.append('g').attr('transform', `translate(${margin},${margin})`).attr('class', 'body')var leftG = body.append('g').attr('class', 'left');var rightG = body.append('g').attr('class', 'right');let leftObj = leftG.selectAll('g.left-g').data(leftData).enter().append('g').attr('class', 'left-g').attr('transform', (d,i) => `translate(0,${scaleL(i)})`).attr('id', (d,i) => `l_${i}`);let rightObj = rightG.selectAll('g.right-g').data(rightData).enter().append('g').attr('class', 'right-g').attr('transform', (d,i) => `translate(${width - margin * 2 - everyW},${scaleL(i)})`).attr('id', (d,i) => `r_${i}`);;leftObj.append('rect').attr('width', everyW).attr('height', everyH).attr('rx', 6).attr('class', 'rect')leftObj.append('text').attr('class', 'text').attr('dy', '1.4em').text(d => d).attr('transform', `translate(${everyW / 2}, 0)`)leftObj.append('use').attr('x',0).attr('y', 0).attr('xlink:href', '#markerA1')rightObj.append('rect').attr('width', everyW).attr('height', everyH).attr('rx', 6).attr('class', 'rect')rightObj.append('text').attr('class', 'text').attr('dy', '1.4em').text(d => d).attr('transform', `translate(${everyW / 2}, 0)`)rightObj.append('use').attr('x',0).attr('y', 0).attr('xlink:href', '#markerB1')var centerObj = body.append('g').attr('transform', `translate(${width / 2 - margin - everyW / 2}, ${height / 2 - margin - everyH / 2   })`)centerObj.append('rect').attr('width', everyW).attr('height', everyH).attr('rx', 6).attr('class', 'center')centerObj.append('text').attr('class', 'text').attr('dy', '1.4em').text(text).attr('transform', `translate(${everyW / 2}, 0)`)body.append('line').attr('x1', everyW * 1 / 4 + width / 4 - margin / 2).attr('y1', everyH / 2 - 2).attr('x2', everyW * 1 / 4 + width / 4 - margin / 2).attr('y2', height - margin * 2 - everyH / 2 + 2).attr('class', 'line')body.append('line').attr('x1', width * 3 / 4 - margin * 3 / 2 - everyW * 1 / 4).attr('y1', everyH / 2 - 2).attr('x2', width * 3 / 4 - margin * 3 / 2 - everyW * 1 / 4).attr('y2', height - margin * 2 - everyH / 2 + 2).attr('class', 'line')body.append('line').attr('x1', everyW * 1 / 4 + width / 4 - margin / 2).attr('y1', height / 2 - margin).attr('x2', width / 2 - margin - everyW / 2 - 10).attr('y2', height / 2 - margin).attr('class', 'line')body.append('path').attr('d', `M ${width / 2 - margin - everyW / 2 - 30} ${height / 2 - margin - 16} L ${width / 2 - margin - everyW / 2 - 10} ${height / 2 - margin} L ${width / 2 - margin - everyW / 2 - 30} ${height / 2 - margin + 16}`).attr('class', 'marker1')body.append('line').attr('x1', (width - margin * 2 - 3 * everyW ) / 2 + 2 * everyW).attr('y1', height / 2 - margin).attr('x2', (width - margin * 2 - 3 * everyW ) * 3 / 4 + 2 * everyW).attr('y2', height / 2 - margin).attr('class', 'line')}function clickLeft(dom, num) {if(dom.getAttribute('off') == "true") {dom.setAttribute('off', "false");d3.select(".left").select(`#l_${num}`).select('use').attr('xlink:href', '#markerA2');} else {dom.setAttribute('off', "true");d3.select(".left").select(`#l_${num}`).select('use').attr('xlink:href', '#markerA1');}}function clickRight(dom, num) {if(dom.getAttribute('off') == "true") {dom.setAttribute('off', "false");d3.select(".right").select(`#r_${num}`).select('use').attr('xlink:href', '#markerB2');} else {dom.setAttribute('off', "true");d3.select(".right").select(`#r_${num}`).select('use').attr('xlink:href', '#markerB1');}}</script><div class="container"><table><tr><td>左側</td><td><button off="true" onclick="clickLeft(this, 0)">1</button></td><td><button off="true" onclick="clickLeft(this, 1)">2</button></td><td><button off="true" onclick="clickLeft(this, 2)">3</button></td><td><button off="true" onclick="clickLeft(this, 3)">4</button></td><td><button off="true" onclick="clickLeft(this, 4)">5</button></td><td><button off="true" onclick="clickLeft(this, 5)">6</button></td><td><button off="true" onclick="clickLeft(this, 6)">7</button></td><td><button off="true" onclick="clickLeft(this, 7)">8</button></td></tr><tr><td>右側</td><td><button off="true" onclick="clickRight(this, 0)">1</button></td><td><button off="true" onclick="clickRight(this, 1)">2</button></td><td><button off="true" onclick="clickRight(this, 2)">3</button></td><td><button off="true" onclick="clickRight(this, 3)">4</button></td><td><button off="true" onclick="clickRight(this, 4)">5</button></td><td><button off="true" onclick="clickRight(this, 5)">6</button></td><td><button off="true" onclick="clickRight(this, 6)">7</button></td><td><button off="true" onclick="clickRight(this, 7)">8</button></td></tr></table>
</div></body>
</html>