vue d3 force cytoscape

1. d3 force

<template>
  <div :id="id">
    <svg width="100vw" height="100vh" />
  </div>
</template>
<script>
/**
 * 力导向图
 */
import * as d3 from 'd3'
let gs = ''
let forceSimulation = ''
let links = ''
let linksText = ''
const nodes = [
  { name: '湖南' },
  { name: '毛' },
  { name: '主席' },
  { name: '湖南' },
  { name: '毛' },
  { name: '主席' },
  { name: '湖南' },
  { name: '毛' },
  { name: '主席' }
]

const edges = [
  { source: 0, target: 1, relation: '籍贯', value: 1 },
  { source: 0, target: 2, relation: '职责', value: 1 },
  { source: 0, target: 3, relation: '职责', value: 1 },
  { source: 0, target: 4, relation: '职责', value: 1 },
  { source: 0, target: 5, relation: '职责', value: 1 },
  { source: 0, target: 6, relation: '职责', value: 1 },
  { source: 0, target: 7, relation: '职责', value: 1 },
  { source: 0, target: 8, relation: '职责', value: 1 },
  { source: 1, target: 2, relation: '职责', value: 1 },
  { source: 2, target: 3, relation: '职责', value: 1 },
  { source: 3, target: 4, relation: '职责', value: 1 },
  { source: 4, target: 5, relation: '职责', value: 1 },
  { source: 5, target: 6, relation: '职责', value: 1 },
  { source: 6, target: 7, relation: '职责', value: 1 },
  { source: 7, target: 8, relation: '职责', value: 1 },
  { source: 8, target: 1, relation: '职责', value: 1 }
]
export default {
  name: 'Scale',
  data() {
    return {
      id: ''
    }
  },
  created() {
    this.id = this.uuid()
  },
  mounted() {
    // 1.创建svg画布
    const marge = { top: 160, bottom: 60, left: 160, right: 60 }
    const width = document.getElementById(this.id).clientWidth
    const height = document.getElementById(this.id).clientHeight
    const svg = d3
      .select(this.$el)
      .select('svg')
      .attr('width', width)
      .attr('height', height)
    const g = svg
      .append('g')
      .attr(
        'transform',
        'translate(' + marge.top + ',' + marge.left + ')'
      )

    // 2.设置一个color的颜色比例尺，为了让不同的扇形呈现不同的颜色
    var colorScale = d3
      .scaleOrdinal()
      .domain(d3.range(nodes.length))
      .range(d3.schemeCategory10)

    // 3.新建一个力导向图
    forceSimulation = d3
      .forceSimulation()
      .force('link', d3.forceLink())
      .force('charge', d3.forceManyBody())
      .force('center', d3.forceCenter())
      .force('collide', d3.forceCollide().radius(60).iterations(2))

    // 4. 初始化力导向图
    // 生成节点数据
    forceSimulation.nodes(nodes).on('tick', this.ticked)
    // 生成边数据
    forceSimulation
      .force('link')
      .links(edges)
      .distance(function(d) {
        // 每一边的长度
        return d.value * 100
      })
    // 设置图形的中心位置
    forceSimulation
      .force('center')
      .x(width / 4)
      .y(height / 4)

    // 5. 绘制边(有了节点和边的数据后)
    links = g
      .append('g')
      .selectAll('line')
      .data(edges)
      .enter()
      .append('line')
      .attr('stroke', function(d, i) {
        return colorScale(i)
      })
      .attr('stroke-width', 1)
    linksText = g
      .append('g')
      .selectAll('text')
      .data(edges)
      .enter()
      .append('text')
      .text(function(d) {
        return d.relation
      })

    // 6. 绘制节点, 先为节点和节点上的文字分组
    gs = g
      .selectAll('.circleText')
      .data(nodes)
      .enter()
      .append('g')
      .attr('transform', function(d, i) {
        var cirX = d.x
        var cirY = d.y
        return 'translate(' + cirX + ',' + cirY + ')'
      })
      .call(
        d3
          .drag()
          .on('start', this.dragStart)
          .on('drag', this.drag)
          .on('end', this.dragEnd)
      )

    // 绘制节点
    gs.append('circle')
      .attr('r', 10)
      .attr('fill', function(d, i) {
        return colorScale(i)
      })
    // 文字
    gs.append('text')
      .attr('x', -10)
      .attr('y', -20)
      .attr('dy', 10)
      .text(function(d) {
        return d.name
      })
  },
  methods: {
    uuid() {
      function s4() {
        return Math.floor((1 + Math.random()) * 0x10000)
          .toString(16)
          .substring(1)
      }
      return (
        s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4()
      )
    },
    ticked() {
      links
        .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
        })

      linksText
        .attr('x', function(d) {
          return (d.source.x + d.target.x) / 2
        })
        .attr('y', function(d) {
          return (d.source.y + d.target.y) / 2
        })

      gs.attr('transform', d => {
        return 'translate(' + d.x + ',' + d.y + ')'
      })
    },
    dragStart(d) {
      d.fx = d.x
      d.fy = d.y
    },
    dragEnd(d) {
      if (!d3.event.active) {
        forceSimulation.alphaTarget(0)
      }
      d.fx = null
      d.fy = null
    },
    drag(d) {
      forceSimulation.alphaTarget(0.7).restart()
      d.fx = d3.event.x
      d.fy = d3.event.y
    }
  }
}
</script>
<style lang='scss' scoped>
</style>

2.cytoscape

<template>
  <div id="box">
    <h1>demo</h1>
    <div id="cy" />
  </div>
</template>

<script>
import cytoscape from 'cytoscape'

export default {
  name: 'Cytoscape',
  components: {},
  data() {
    return {
      nodes: [
        { data: { id: 'n0', label: '哈哈哈' }},
        { data: { id: 'n1', label: '嘟嘟嘟' }},
        { data: { id: 'n2', label: '嘿嘿嘿' }},
        { data: { id: 'n3', label: '啦啦啦' }},
        { data: { id: 'n4', label: '嘀嘀嘀' }},
        { data: { id: 'n5', label: '噜噜噜' }}
      ],
      edges: [
        { data: { source: 'n2', target: 'n1' }},
        { data: { source: 'n2', target: 'n3' }},
        { data: { source: 'n2', target: 'n0' }},
        { data: { source: 'n1', target: 'n0' }},
        { data: { source: 'n0', target: 'n1' }},
        { data: { source: 'n4', target: 'n5' }},
        { data: { source: 'n3', target: 'n4' }},
        { data: { source: 'n5', target: 'n0' }},
        { data: { source: 'n5', target: 'n1' }},
        { data: { source: 'n5', target: 'n2' }},
        { data: { source: 'n5', target: 'n3' }},
        { data: { source: 'n4', target: 'n3' }}
      ]
    }
  },
  mounted() {
    this.createCytoscape()
  },
  methods: {
    createCytoscape() {
      cytoscape.warnings(false)
      cytoscape({
        container: document.getElementById('cy'),
        boxSelectionEnabled: false,
        userZoomingEnabled: false, // 滚轮缩放
        wheelSensitivity: 0.1,
        autounselectify: true,
        autoungrabify: false,
        autolock: false,
        layout: {
          name: 'circle'
        },
        minZoom: 0.3,
        style: [{
          selector: 'node',
          style: {
            'content': 'data(label)',
            'height': 100,
            'width': 100,
            'color': '#fff',
            'pie-size': '100%',
            'text-valign': 'center',
            'text-halign': 'center',
            'background-color': '#fd942a'
          }
        },
        {
          selector: ':parent',
          css: {
            'text-valign': 'top',
            'text-halign': 'center'
            // 'text-halign': 'right',
            // 'text-rotation': '90deg', //文字旋转
          }
        },
        {
          selector: 'edge',
          style: {
            width: 3,
            label: 'data(label)',
            'target-arrow-shape': 'triangle',
            // "target-arrow-fill": "hollow", //箭头填充 空心
            'line-color': '#9dbaea',
            'target-arrow-color': '#9dbaea',
            'curve-style': 'bezier'
          }
        }

        ],
        elements: {
          // 节点数据
          nodes: this.nodes,
          //
          edges: this.edges
        }
      })
    }
  }
}

</script>

<style lang="scss" scoped>
#cy {
  width: 90vw;
  height: 90vh;
}

h1 {
  opacity: 0.5;
  font-size: 1em;
}

</style>

https://js.cytoscape.org/#getting-started/initialisation

记录进步。