How to place a label on the center of the pink path in the example below?
Overwrite refX
and refY
of the label definition. But then how two translate
the center-coords? Because the distance (conn._target.x - conn._source.x)/2;
between the nodes is not scaled.
Running code:
const data = [
{ customId: 1, customParentId: null, customName: 'node1' },
{ customId: 2, customParentId: 1, customName: 'node2' },
{ customId: 3, customParentId: 1, customName: 'node3' },
];
chart = new d3.OrgChart()
.nodeId((dataItem) => dataItem.customId)
.parentNodeId((dataItem) => dataItem.customParentId)
.nodeWidth((node) => 100)
.nodeHeight((node) => 100)
.defs(myDefs)
.nodeContent((node) => {
return `<div customId="${node.data.customId}"
style="background-color:aqua;width:${node.width}px;height:${node.height}px"
>
${node.data.customName}
</div>`;
})
.container('.chart-container')
.data(data).render();
function myDefs(state, visibleConnections) {
return `<defs>
${visibleConnections.map(conn => {
const labelWidth = this.getTextWidth(conn.label, { ctx: state.ctx, fontSize: 2, defaultFont: state.defaultFont });
const refX = (conn._target.x - conn._source.x)/2;
const refY = (conn._target.y - conn._source.y)/2;
return `
<marker id="${conn.from + "_" + conn.to}" refX="${refX}" refY="${refY}" markerWidth="500" markerHeight="500" orient="${conn._source.x < conn._target.x ? "auto" : "auto-start-reverse"}" >
<rect rx=0.5 width=${conn.label ? labelWidth + 3 : 0} height=3 y=1 fill="#E27396"></rect>
<text font-size="2px" x=1 fill="white" y=3>${conn.label || ''}</text>
</marker>
<marker id="arrow-${conn.from + "_" + conn.to}" markerWidth="500" markerHeight="500" refY="2" refX="1" orient="${conn._source.x < conn._target.x ? "auto" : "auto-start-reverse"}" >
<path transform="translate(0)" d='M0,0 V4 L2,2 Z' fill='#E27396' />
</marker>
`}).join("")}
</defs>
`}
setTimeout(function() {
chart.connections([{ from: "1", to: "2", label: "Conflicts of interest" }]).render();
}, 500);
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/d3-flextree.js"></script>
<div class="chart-container"></div>