1. 安裝
前端工程根目錄下執行 yarn add d3 ，安裝 d3 依賴包。安裝的版本 "d3": "^5.7.0"
2. vue 文件中引入 d3
import * as d3 from 'd3'
例如一個基礎的 d3.vue 文件內容，包含基本的 <template> <script> <style>
<template> <div> <svg width="960" height="600"></svg> </div> </template> <script> import * as d3 from 'd3' export default { data () { return { } } } </script> <style scoped></style> 3.設置一個力導向圖的基本骨架，添加了控制節點和線條的 css
注意： .link line .node circle 節點和線條的樣式不能寫在 <style scoped></style> 中，因為 d3 數據是動態渲染的，scoped 中的樣式無法控制動態生成的 dom
<script> import * as d3 from 'd3' export default { data () { return { } }, mounted () { let svg = d3.select('svg') let width = +svg.attr('width') let height = +svg.attr('height') }, methods: { } } </script> <style scoped> svg { border: 1px solid #ccc; } </style> <style> .links line { stroke: #999; stroke-opacity: 0.6; } .nodes circle { stroke: #fff; stroke-width: 1.5px; } </style> 添加節點數據
let nodesData = [
{ 'name': 'Lillian', 'sex': 'F' },
{ 'name': 'Gordon', 'sex': 'M' },
{ 'name': 'Sylvester', 'sex': 'M' },
{ 'name': 'Mary', 'sex': 'F' },
{ 'name': 'Helen', 'sex': 'F' },
{ 'name': 'Jamie', 'sex': 'M' },
{ 'name': 'Jessie', 'sex': 'F' },
{ 'name': 'Ashton', 'sex': 'M' },
{ 'name': 'Duncan', 'sex': 'M' },
{ 'name': 'Evette', 'sex': 'F' },
{ 'name': 'Mauer', 'sex': 'M' },
{ 'name': 'Fray', 'sex': 'F' },
{ 'name': 'Duke', 'sex': 'M' },
{ 'name': 'Baron', 'sex': 'M' },
{ 'name': 'Infante', 'sex': 'M' },
{ 'name': 'Percy', 'sex': 'M' },
{ 'name': 'Cynthia', 'sex': 'F' }
]
使用節點數據設置模擬器
let simulation = d3.forceSimulation().nodes(nodesData)
添加定心力和充電力
simulation
.force('charge_force', d3.forceManyBody())
.force('center_force', d3.forceCenter(width / 2, height / 2))
在svg元素中繪制圓圈
let node = svg.append('g') .attr('class', 'nodes') .selectAll('circle') .data(nodesData) .enter() .append('circle') .attr('r', 10) .attr('fill', this.circleColor) methods 中添加 circleColor 函數
circleColor (d) { if (d.sex === 'M') { return 'blue' } else { return 'pink' } }, 每次作出舉動時需要更新節點位置
simulation.on('tick', tickAction) function tickAction () { node .attr('cx', (d) => { return d.x }) .attr('cy', (d) => { return d.y }) } 現在圖上已經有一些圓圈了,如下效果
添加連線，指定鏈接數據
let linksData = [
{ 'source': 'Sylvester', 'target': 'Gordon', 'type': 'A' },
{ 'source': 'Sylvester', 'target': 'Lillian', 'type': 'A' },
{ 'source': 'Sylvester', 'target': 'Mary', 'type': 'A' },
{ 'source': 'Sylvester', 'target': 'Jamie', 'type': 'A' },
{ 'source': 'Sylvester', 'target': 'Jessie', 'type': 'A' },
{ 'source': 'Sylvester', 'target': 'Helen', 'type': 'A' },
{ 'source': 'Helen', 'target': 'Gordon', 'type': 'A' },
{ 'source': 'Mary', 'target': 'Lillian', 'type': 'A' },
{ 'source': 'Ashton', 'target': 'Mary', 'type': 'A' },
{ 'source': 'Duncan', 'target': 'Jamie', 'type': 'A' },
{ 'source': 'Gordon', 'target': 'Jessie', 'type': 'A' },
{ 'source': 'Sylvester', 'target': 'Fray', 'type': 'E' },
{ 'source': 'Fray', 'target': 'Mauer', 'type': 'A' },
{ 'source': 'Fray', 'target': 'Cynthia', 'type': 'A' },
{ 'source': 'Fray', 'target': 'Percy', 'type': 'A' },
{ 'source': 'Percy', 'target': 'Cynthia', 'type': 'A' },
{ 'source': 'Infante', 'target': 'Duke', 'type': 'A' },
{ 'source': 'Duke', 'target': 'Gordon', 'type': 'A' },
{ 'source': 'Duke', 'target': 'Sylvester', 'type': 'A' },
{ 'source': 'Baron', 'target': 'Duke', 'type': 'A' },
{ 'source': 'Baron', 'target': 'Sylvester', 'type': 'E' },
{ 'source': 'Evette', 'target': 'Sylvester', 'type': 'E' },
{ 'source': 'Cynthia', 'target': 'Sylvester', 'type': 'E' },
{ 'source': 'Cynthia', 'target': 'Jamie', 'type': 'E' },
{ 'source': 'Mauer', 'target': 'Jessie', 'type': 'E' }
]
創建鏈接力
let linkForce = d3.forceLink(linksData) .id((d) => { return d.name }) 把鏈接力添加到模擬器中
simulation.force('links', linkForce)
在頁面繪制鏈接
let link = svg.append('g') .attr('class', 'links') .selectAll('line') .data(linksData) .enter() .append('line') .attr('stroke-width', 2) .style('stroke', this.linkColor) methods 中添加 linkColor 函數
linkColor (d) { if (d.type === 'A') { return 'green' } else { return 'red' } } 在 tickAction 函數中更新鏈接位置
link
.attr('x1', (d) => { return d.source.x }) .attr('y1', (d) => { return d.source.y }) .attr('x2', (d) => { return d.target.x }) .attr('y2', (d) => { return d.target.y }) 目前就實現了一個簡單的力導向圖
d3.vue 完整代碼如下
<template> <div> <h1>Knowledge Graph</h1> <svg width="960" height="600"></svg> </div> </template> <script> import * as d3 from 'd3' export default { data () { return { } }, mounted () { let svg = d3.select('svg') let width = +svg.attr('width') let height = +svg.attr('height') let nodesData = [ { 'name': 'Lillian', 'sex': 'F' }, { 'name': 'Gordon', 'sex': 'M' }, { 'name': 'Sylvester', 'sex': 'M' }, { 'name': 'Mary', 'sex': 'F' }, { 'name': 'Helen', 'sex': 'F' }, { 'name': 'Jamie', 'sex': 'M' }, { 'name': 'Jessie', 'sex': 'F' }, { 'name': 'Ashton', 'sex': 'M' }, { 'name': 'Duncan', 'sex': 'M' }, { 'name': 'Evette', 'sex': 'F' }, { 'name': 'Mauer', 'sex': 'M' }, { 'name': 'Fray', 'sex': 'F' }, { 'name': 'Duke', 'sex': 'M' }, { 'name': 'Baron', 'sex': 'M' }, { 'name': 'Infante', 'sex': 'M' }, { 'name': 'Percy', 'sex': 'M' }, { 'name': 'Cynthia', 'sex': 'F' } ] let linksData = [ { 'source': 'Sylvester', 'target': 'Gordon', 'type': 'A' }, { 'source': 'Sylvester', 'target': 'Lillian', 'type': 'A' }, { 'source': 'Sylvester', 'target': 'Mary', 'type': 'A' }, { 'source': 'Sylvester', 'target': 'Jamie', 'type': 'A' }, { 'source': 'Sylvester', 'target': 'Jessie', 'type': 'A' }, { 'source': 'Sylvester', 'target': 'Helen', 'type': 'A' }, { 'source': 'Helen', 'target': 'Gordon', 'type': 'A' }, { 'source': 'Mary', 'target': 'Lillian', 'type': 'A' }, { 'source': 'Ashton', 'target': 'Mary', 'type': 'A' }, { 'source': 'Duncan', 'target': 'Jamie', 'type': 'A' }, { 'source': 'Gordon', 'target': 'Jessie', 'type': 'A' }, { 'source': 'Sylvester', 'target': 'Fray', 'type': 'E' }, { 'source': 'Fray', 'target': 'Mauer', 'type': 'A' }, { 'source': 'Fray', 'target': 'Cynthia', 'type': 'A' }, { 'source': 'Fray', 'target': 'Percy', 'type': 'A' }, { 'source': 'Percy', 'target': 'Cynthia', 'type': 'A' }, { 'source': 'Infante', 'target': 'Duke', 'type': 'A' }, { 'source': 'Duke', 'target': 'Gordon', 'type': 'A' }, { 'source': 'Duke', 'target': 'Sylvester', 'type': 'A' }, { 'source': 'Baron', 'target': 'Duke', 'type': 'A' }, { 'source': 'Baron', 'target': 'Sylvester', 'type': 'E' }, { 'source': 'Evette', 'target': 'Sylvester', 'type': 'E' }, { 'source': 'Cynthia', 'target': 'Sylvester', 'type': 'E' }, { 'source': 'Cynthia', 'target': 'Jamie', 'type': 'E' }, { 'source': 'Mauer', 'target': 'Jessie', 'type': 'E' } ] let simulation = d3.forceSimulation() .nodes(nodesData) simulation .force('charge_force', d3.forceManyBody()) .force('center_force', d3.forceCenter(width / 2, height / 2)) let node = svg.append('g') .attr('class', 'nodes') .selectAll('circle') .data(nodesData) .enter() .append('circle') .attr('r', 10) .attr('fill', this.circleColor) simulation.on('tick', tickAction) function tickAction () { node .attr('cx', (d) => { return d.x }) .attr('cy', (d) => { return d.y }) link .attr('x1', (d) => { return d.source.x }) .attr('y1', (d) => { return d.source.y }) .attr('x2', (d) => { return d.target.x }) .attr('y2', (d) => { return d.target.y }) } let linkForce = d3.forceLink(linksData) .id((d) => { return d.name }) simulation.force('links', linkForce) let link = svg.append('g') .attr('class', 'links') .selectAll('line') .data(linksData) .enter() .append('line') .attr('stroke-width', 2) .style('stroke', this.linkColor) }, methods: { circleColor (d) { if (d.sex === 'M') { return 'blue' } else { return 'pink' } }, linkColor (d) { if (d.type === 'A') { return 'green' } else { return 'red' } } } } </script> <style scoped> svg { border: 1px solid #ccc; } </style> <style> .links line { stroke: #999; stroke-opacity: 0.6; } .nodes circle { stroke: #fff; stroke-width: 1.5px; } </style> GitHub
作者：情義w
鏈接：https://www.jianshu.com/p/e18854d45da1
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。