Skip to content

Commit 92e0a5b

Browse files
gywgithubgywgithub
committed
style: change border style
1 parent b422cad commit 92e0a5b

13 files changed

+55
-85
lines changed

‎src/App.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,8 @@ body,
3535
.text-align-left {
3636
text-align: left;
3737
}
38+
39+
.container-border {
40+
border: 1px solid #eee;
41+
}
3842
</style>

‎src/components/ForceBasedLabelPlacementI.vue‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
33
<h2>Force-based label placement I</h2>
4-
<svg id="viz"></svg>
4+
<svg id="viz" class="container-border"></svg>
55
</div>
66
</template>
77

@@ -199,20 +199,14 @@ export default {
199199
}
200200
}
201201
</script>
202-
<style scoped>
203-
svg {
204-
/* border: 1px solid #ccc; */
205-
width: 100%;
206-
}
207-
</style>
208202
<style>
209-
.links line {
203+
/* .links line {
210204
stroke: #999;
211205
stroke-opacity: 0.6;
212206
}
213207
214208
.nodes circle {
215209
stroke: black;
216210
stroke-width: 0px;
217-
}
211+
} */
218212
</style>

‎src/components/ForceBasedLabelPlacementII.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
2-
<div>
2+
<div class="force-base-ii">
33
<h2>Force-based label placement II</h2>
4-
<svg id="viz"></svg>
4+
<svg id="viz" class="container-border"></svg>
55
</div>
66
</template>
77

@@ -186,18 +186,17 @@ export default {
186186
</script>
187187
<style scoped>
188188
svg {
189-
/* border: 1px solid #ccc; */
190189
width: 100%;
191190
}
192191
</style>
193192
<style>
194-
.links line {
193+
/* .links line {
195194
stroke: #999;
196195
stroke-opacity: 0.6;
197196
}
198197
199198
.nodes circle {
200199
stroke: black;
201200
stroke-width: 0px;
202-
}
201+
} */
203202
</style>

‎src/components/ForceBasedLabelPlacementIII.vue‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
2-
<div>
3-
<h2>Force-based label placement II</h2>
4-
<svg id="viz"></svg>
2+
<div class="force-base-iii">
3+
<h2>Force-based label placement III</h2>
4+
<svg id="viz" class="container-border"></svg>
55
</div>
66
</template>
77

88
<script>
99
import * as d3 from 'd3'
10-
// import jsonData from '../assets/json/simple_force_layout.json'
10+
import jsonData from '../assets/json/simple_force_layout.json'
1111
// import jsonData from '../assets/json/simple_force_layout_2.json' // 金融数据
12-
import jsonData from '../assets/json/simple_force_layout_3.json'
12+
// import jsonData from '../assets/json/simple_force_layout_3.json' // 新基建数据
1313
export default {
1414
name: 'ForceBasedLabelPlacement',
1515
data () {
@@ -80,13 +80,13 @@ export default {
8080
8181
this.restart()
8282
83-
// setTimeout(() => {
84-
// let addData = [{ 'id': 'Four', 'group': 4 }, { 'id': 'Five', 'group': 5 }]
85-
// let addLinks = [{ 'source': 'Four', 'target': 'Five', 'value': 3 }, { 'source': 'Five', 'target': 'Feuilly', 'value': 4 }]
86-
// this.graph.nodes = [...this.graph.nodes, ...addData]
87-
// this.graph.links = [...this.graph.links, ...addLinks]
88-
// this.restart()
89-
// }, 1000)
83+
setTimeout(() => {
84+
let addData = [{ 'id': 'Four', 'group': 4 }, { 'id': 'Five', 'group': 5 }]
85+
let addLinks = [{ 'source': 'Four', 'target': 'Five', 'value': 3 }, { 'source': 'Five', 'target': 'Feuilly', 'value': 4 }]
86+
this.graph.nodes = [...this.graph.nodes, ...addData]
87+
this.graph.links = [...this.graph.links, ...addLinks]
88+
this.restart()
89+
}, 1000)
9090
},
9191
methods: {
9292
restart () {
@@ -161,8 +161,14 @@ export default {
161161
}
162162
}
163163
</script>
164-
<style scoped>
165-
svg {
166-
border: 1px solid #ccc;
164+
<style>
165+
.force-base-iii .links line {
166+
stroke: #999;
167+
stroke-opacity: 0.6;
168+
}
169+
170+
.force-base-iii .nodes circle {
171+
stroke: black;
172+
stroke-width: 0px;
167173
}
168174
</style>

‎src/components/TreeI.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
33
<h2>Tree</h2>
4-
<svg id="viz" width="1250" height="800" />
4+
<svg id="viz" width="1250" height="800" class="container-border" />
55
</div>
66
</template>
77
<script>
@@ -89,7 +89,4 @@ export default {
8989
}
9090
</script>
9191
<style scoped>
92-
svg {
93-
border: 1px solid #ccc;
94-
}
9592
</style>

‎src/components/TreeII.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
33
<h2>TreeII</h2>
4-
<svg id="vizTreeII" />
4+
<svg id="vizTreeII" class="container-border" />
55
</div>
66
</template>
77
<script>
@@ -186,7 +186,7 @@ export default {
186186
.transition()
187187
.delay(1)
188188
.style('fill', function () {
189-
return '#6cfa00'
189+
return '#aacc00'
190190
})
191191
.style('stroke-width', function () {
192192
return '3px'

‎src/components/TreeIII.vue‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div>
33
<h2>TreeIII</h2>
44
<div>tree editor with node create, delete, and rename</div>
5-
<div class="container">
5+
<div class="container container-border">
66
<div class="width-300">
77
Current Node
88
<br />
@@ -29,7 +29,7 @@
2929
<input type="button" value="rename node" @click="renameNode" />&nbsp;&nbsp;
3030
</div>
3131
</div>
32-
<svg id="vizTreeIII" />
32+
<svg id="vizTreeIII" class="container-border" />
3333
</div>
3434
</template>
3535
<script>
@@ -440,8 +440,7 @@ export default {
440440
<style scoped>
441441
.container {
442442
display: flex;
443-
border: 1px solid #ccc;
444-
margin: 20px;
443+
margin: 10px 0;
445444
text-align: left;
446445
width: 100%;
447446
}

‎src/components/TreeIV.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
:view-box.camel="viewbox"
99
version="1.1"
1010
xmlns="http://www.w3.org/2000/svg"
11-
style="border:1px solid #ccc; width: 80%;height:90vh;"
11+
style="width: 80%;height:80vh;" class="container-border"
1212
>
1313
<g>
1414
<g v-for="(v, k) in nodes" :key="k" :cx="v.x" :cy="v.y" r="5">

‎src/components/TreeV.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
22
<div>
33
<h2>TreeV Collapsible Tree</h2>
4-
<div class="" style="text-align:left; padding-left:20px;;">
4+
<div class="text-align-left">
55
<a href="https://observablehq.com/@d3/collapsible-tree?collection=@d3/d3-hierarchy">Collapsible Tree</a><br>
66
<a href="https://observablehq.com/@d3/tidy-tree">Tidy Tree</a><br>
77
<a href="https://github.com/xswei/d3-hierarchy/blob/master/README.md#cluster_separation">https://github.com/xswei/d3-hierarchy/blob/master/README.md#cluster_separation</a><br>
88
<a href="https://github.com/xswei/d3-hierarchy/blob/master/README.md#tree">https://github.com/xswei/d3-hierarchy/blob/master/README.md#tree</a>
99
</div>
10-
<svg id="vizTreeII" />
10+
<svg id="vizTreeV" class="container-border" />
1111
</div>
1212
</template>
1313
<script>
@@ -100,7 +100,7 @@ export default {
100100
var width = 960 - margin.left - margin.right
101101
var height = 600 - margin.top - margin.bottom
102102
103-
var svg = d3.select('#vizTreeII').attr('viewBox', [-10, -10, width, height])
103+
var svg = d3.select('#vizTreeV').attr('viewBox', [-10, -10, width, height])
104104
.append('g')
105105
.attr('transform', 'translate(' +
106106
margin.left + ',' + margin.top + ')')
@@ -287,15 +287,15 @@ export default {
287287
}
288288
</script>
289289
<style>
290-
#vizTreeII circle {
290+
#vizTreeV circle {
291291
fill: #fff;
292292
stroke: #54a8ff;
293293
stroke-width: 3px;
294294
}
295-
#vizTreeII .node text {
295+
#vizTreeV .node text {
296296
font: 12px sans-serif;
297297
}
298-
#vizTreeII .link {
298+
#vizTreeV .link {
299299
fill: none;
300300
stroke: #ccc;
301301
stroke-width: 2px;

‎src/components/TreeVI.vue‎

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<template>
22
<div>
3-
<!-- <div>
4-
<input type="button" value="add node" @click="addNode()" />
5-
</div> -->
6-
<svg class="d3-tree-vi width-100-percent" />
3+
<svg class="d3-tree-vi width-100-percent container-border" />
74
</div>
85
</template>
96

@@ -267,23 +264,6 @@ export default {
267264
}
268265
}
269266
</script>
270-
<style>
271-
/* .d3-tree-vi circle {
272-
fill: #fff;
273-
stroke: #54a8ff;
274-
stroke-width: 2px;
275-
}
276-
277-
.d3-tree-vi .node text {
278-
font: 12px sans-serif;
279-
}
280-
281-
.d3-tree-vi .link {
282-
fill: none;
283-
stroke: #ccc;
284-
stroke-width: 2px;
285-
} */
286-
</style>
287267
<style scoped>
288268
.width-100-percent {
289269
width: 100%;

0 commit comments

Comments
 (0)