図力指向ヴューD3

その他 2019-11-17 10:46:39 訪問数: null

インストール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レンダリングされているので、スタイルは、動的に生成された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)

方法は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)

方法は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の

https://github.com/gywgithub/vue-d3-examples



著者：W友情
リンクします。https：//www.jianshu.com/p/e18854d45da1
出典：ジェーンの本が
著者によって著作権で保護されています。著者は認可商業転載してください接触、非商用の転載は、ソースを明記してください。

おすすめ

転載: www.cnblogs.com/sea520/p/11875445.html
おすすめ
Apache Doris バージョン 2.0.10 が正式にリリースされました。
Open Source Daily | 大手モデルが戦争に突入、大手モデルのユニコーンが身売りしていることが明らかに; 最大のオープンソース AI コミュニティが GPU の共有に 1,000 万ドルを提供すると示唆
ランキング
ジャンゴ使用KindEditorアップロード写真
FirstOrDefault VS C＃の検索
SQL UNIONルール
VS Code は HTML スタートアップを実装し、ホット アップデート サービスを提供します
Linux プログラミング: 1. コルーチンの設計原則
目标检测的“尽头”竟是语言建模？Hinton团队提出Pix2Seq：性能优于DETR
CTFdインストールの新バージョン以降の操作および保守について話します
構造体へのポインタ出力4人の学生学生ID名前性別年齢を使用することにより
1.3.2リリース、連続ファイル同期ツールをSyncthing
PyQt5 インストールチュートリアル
アーカイブ
もっと
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)

コードワールド

© 2018 codetd.com