|
@@ -3,24 +3,30 @@
|
|
width="100%" height="100%"
|
|
width="100%" height="100%"
|
|
ref="svg" :id="id"
|
|
ref="svg" :id="id"
|
|
>
|
|
>
|
|
- <path
|
|
|
|
- v-for="(item, index) in links"
|
|
|
|
- :key="`link_${index}`"
|
|
|
|
- :d="lineGenerator([item.source, item.target])"
|
|
|
|
- stroke="black"
|
|
|
|
- />
|
|
|
|
-
|
|
|
|
- <template v-for="(node, index) in nodes">
|
|
|
|
- <circle
|
|
|
|
- :key="'circle' + index"
|
|
|
|
- :cx="node.x"
|
|
|
|
- :cy="node.y"
|
|
|
|
- :class="node.data.class + (node.data.first ? ' first' : '')"
|
|
|
|
- :r="node.children ? 7 : 5"
|
|
|
|
- >
|
|
|
|
- <title>{{ node.data.title }}</title>
|
|
|
|
- </circle>
|
|
|
|
- <text :key="'text' + index" :x="node.x + 7" :y="node.y-7">{{ node.data.id }}</text>
|
|
|
|
|
|
+ <template v-if="ready">
|
|
|
|
+ <path
|
|
|
|
+ v-for="(item, index) in links"
|
|
|
|
+ :key="`link_${index}`"
|
|
|
|
+ :d="lineGenerator([item.source, item.target])"
|
|
|
|
+ stroke="black"
|
|
|
|
+ />
|
|
|
|
+
|
|
|
|
+ <template v-for="(node, index) in nodes">
|
|
|
|
+ <circle
|
|
|
|
+ :key="'circle' + index"
|
|
|
|
+ :cx="node.x"
|
|
|
|
+ :cy="node.y"
|
|
|
|
+ :class="node.data.class + (node.data.first ? ' first' : '')"
|
|
|
|
+ :r="node.children ? 7 : 5"
|
|
|
|
+ >
|
|
|
|
+ <title>{{ node.data.title }}</title>
|
|
|
|
+ </circle>
|
|
|
|
+
|
|
|
|
+ <text
|
|
|
|
+ v-if="showId"
|
|
|
|
+ :key="'text' + index" :x="node.x + 7" :y="node.y-7"
|
|
|
|
+ >{{ node.data.id }}</text>
|
|
|
|
+ </template>
|
|
</template>
|
|
</template>
|
|
</svg>
|
|
</svg>
|
|
</template>
|
|
</template>
|
|
@@ -45,11 +51,13 @@ export default {
|
|
props: {
|
|
props: {
|
|
nodes: { type: Array, required: true },
|
|
nodes: { type: Array, required: true },
|
|
links: { type: Array, required: true },
|
|
links: { type: Array, required: true },
|
|
- id: { type: String, default: 'map' }
|
|
|
|
|
|
+ id: { type: String, default: 'node-map' },
|
|
|
|
+ showId: { type: Boolean, default: true }
|
|
},
|
|
},
|
|
|
|
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
|
|
+ ready: false,
|
|
width: 100,
|
|
width: 100,
|
|
height: 100,
|
|
height: 100,
|
|
simulation: forceSimulation(),
|
|
simulation: forceSimulation(),
|
|
@@ -74,6 +82,7 @@ export default {
|
|
this.setupForces()
|
|
this.setupForces()
|
|
// Wait for DOM update so d3 can select
|
|
// Wait for DOM update so d3 can select
|
|
this.$nextTick(this.initListeners)
|
|
this.$nextTick(this.initListeners)
|
|
|
|
+ this.ready = true
|
|
},
|
|
},
|
|
|
|
|
|
initListeners () {
|
|
initListeners () {
|