|
|
@@ -11,7 +11,7 @@
|
|
|
:label="item.xdx_xsxm + ' ' + item.grade_name + item.class_name" :value="item.xdx_xsxh" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
- <div id="d3" v-show="this.treeData"></div>
|
|
|
+ <div id="d3" class="py-6" v-show="this.treeData"></div>
|
|
|
<el-empty v-show="!this.treeData"></el-empty>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -75,13 +75,13 @@ export default {
|
|
|
|
|
|
|
|
|
const width = 1200;
|
|
|
- const height = 400;
|
|
|
+ const height = 500;
|
|
|
|
|
|
// Compute the tree height; this approach will allow the height of the
|
|
|
// SVG to scale according to the breadth (width) of the tree layout.
|
|
|
const root = d3.hierarchy(data);
|
|
|
- const dx = 700 / n;
|
|
|
- const dy = 80;
|
|
|
+ const dx = 500 / n;
|
|
|
+ const dy = 90;
|
|
|
console.log('dx,dy : ', dx, dy)
|
|
|
// Create a tree layout.
|
|
|
const tree = d3.tree().nodeSize([dx, dy]);
|
|
|
@@ -108,7 +108,7 @@ export default {
|
|
|
const svg = d3.select("#d3").append("svg")
|
|
|
.attr("width", width)
|
|
|
.attr("height", height)
|
|
|
- .attr("viewBox", [-600, -360, width, height])
|
|
|
+ .attr("viewBox", [-600, -460, width, height])
|
|
|
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
|
|
|
|
|
|
const link = svg.append("g")
|
|
|
@@ -141,9 +141,9 @@ export default {
|
|
|
.attr("r", 0);
|
|
|
|
|
|
node.append("text")
|
|
|
- .attr("transform", "rotate(90)")
|
|
|
+ .attr("transform", d => d.children ? "rotate(90)" : "rotate(70)")
|
|
|
.attr("dy", "0.31em")
|
|
|
- .attr("x", d => d.children ? -12 : 12)
|
|
|
+ .attr("x", d => d.children ? -12 : 7)
|
|
|
.attr("text-anchor", d => d.children ? "end" : "start")
|
|
|
.text(d => d.data.name)
|
|
|
.clone(true).lower()
|
zhuf