D3.js 集群节点重叠

Question

我正在使用 d3.js 制作流程图。但我现在遇到问题，节点中的矩形与另一个矩形重叠。

如图所示，矩形的第 3 层重叠。

我想像这样显示它，它们之间有固定的边距或填充。

这是我当前的代码。

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

感谢任何帮助。谢谢。

Answer 1

不要使用 .size([width, height])，而是使用 .nodeSize([nodeWidth, nodeHeight])。

const cluster = d3.cluster()
    .nodeSize([nodeWidth, nodeHeight])

D3.js 集群节点重叠

D3.js cluster node is overlapping

d3.js