I'm using the d3.js to make a flow chart. But I now having problem which the rectangle in node is overlapping to another.

As this image shown, the 3rd layer of the rectangle is overlapping.

I want to show it as something like this, with a fixed margin or padding between them.

Here is my current code.

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

Any help is appreciated. Thanks.

CodePudding user response：

Instead of using the .size([width, height]), use the .nodeSize([nodeWidth, nodeHeight]).

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