我正在使用 d3.js 制作流程圖。但是我現在遇到了節點中的矩形與另一個重疊的問題。
如圖所示，矩形的第三層重疊。
我想將它顯示為這樣的東西，它們之間有固定的邊距或填充。
這是我當前的代碼。
const data = {
"children": [
{
"name": "boss1",
"children": [
{
"name": "mister_a",
"colname": "level3"
},
{
"name": "mister_b",
"colname": "level3"
},
{
"name": "mister_c",
"colname": "level3"
},
{
"name": "mister_d",
"colname": "level3"
}
],
"colname": "level2"
},
{
"name": "boss2",
"children": [
{
"name": "mister_e",
"colname": "level3"
},
{
"name": "mister_f",
"colname": "level3"
}
],
"colname": "level2"
}
],
"name": "CEO"
}
const svg = d3.select(this.$refs.svg)
const container = d3.select('svg g')
const width = this.$refs.svg.clientWidth,
height = this.$refs.svg.clientHeight,
marginTop = 25, curveDegree = 50, entityHeight = 300
// Create the cluster layout:
const cluster = d3.cluster().size([width, height]);
// Give the data to this cluster layout:
const root = d3.hierarchy(data, function (d) {
return d.children;
});
cluster(root);
// Add the links between nodes:
container.selectAll('path')
.data(root.descendants().slice(1))
.join('path')
.attr("d", function (d) {
let curve = d.depth * entityHeight - curveDegree
return "M" d.parent.x "," (d.parent.depth * entityHeight marginTop)
"C " d.parent.x "," (curve)
" " d.x "," (curve)
" " d.x "," (d.depth * entityHeight marginTop);
})
.style("fill", 'none')
.attr("stroke", '#ccc')
// Add a circle for each node.
container.selectAll("g")
.data(root.descendants())
.join("g")
.append("rect")
.attr("class", "shadow")
.style("fill", '#fff')
.style("stroke", '#000')
.attr("width", 100)
.attr("height", 30)
.attr("transform", function (d) {
return `translate(${d.x - 100 / 2},${d.depth * entityHeight marginTop - 30 / 2})`
})
https://pastebin.com/C0T17cWS
任何幫助表示贊賞。謝謝。
uj5u.com熱心網友回復：
而不是使用.size([width, height])，使用.nodeSize([nodeWidth, nodeHeight])。
const cluster = d3.cluster()
.nodeSize([nodeWidth, nodeHeight])
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/326011.html
標籤：d3.js