in src/sankeyDiagram.ts [1824:1929]
private renderLinkLabels(sankeyDiagramDataView: SankeyDiagramDataView): void {
// create labels on link as A - B : Value
let linkTextData: SankeyDiagramLink[] = sankeyDiagramDataView.links.filter((link: SankeyDiagramLink) => {
return link.height > SankeyDiagram.MinSize && this.dataView.settings.linkLabels.show;
});
let linkArrowData: SankeyDiagramLink[] = sankeyDiagramDataView.links.filter((link: SankeyDiagramLink) => {
return link.height > SankeyDiagram.MinSize && link.direction !== SankeyLinkDirrections.SelfLink;
});
// add defs element to svg
let svgDefs: Selection<any> = this.root
.selectAll("defs");
let svgDefsSelectionData: UpdateSelection<Number> = svgDefs.data([1]);
let svgDefsSelectionEnter = svgDefsSelectionData
.enter()
.append("defs");
svgDefsSelectionData
.exit()
.remove();
let svgDefsSelectionMerged = svgDefsSelectionEnter.merge(svgDefs);
let singleDefsElement: Selection<any> = d3.select(svgDefsSelectionMerged.node());
// add text path for lables
let linkLabelPaths: Selection<any> = singleDefsElement.selectAll(SankeyDiagram.LinkLabelPathsSelector.selectorName);
let linkLabelPathsSelectionData: UpdateSelection<SankeyDiagramLink> = linkLabelPaths.data(linkArrowData);
linkLabelPathsSelectionData
.exit()
.remove();
let linkLabelPathsSelectionEnter = linkLabelPathsSelectionData
.enter()
.append("path");
let linkLabelPathsSelectionMerged = linkLabelPathsSelectionEnter.merge(linkLabelPaths);
linkLabelPathsSelectionMerged
.classed(SankeyDiagram.LinkLabelPathsSelector.className, true)
.attr(
"d", (link: SankeyDiagramLink) => {
if (link.direction === SankeyLinkDirrections.Forward) {
return this.getLinkLabelSvgPath(link);
}
}
)
.attr(
"id", (link: SankeyDiagramLink) => {
return SankeyDiagram.createLink(link, true);
}
);
// add text by using paths from defs
let linkLabelTexts: Selection<any> = this.main
.select(SankeyDiagram.LinksSelector.selectorName)
.selectAll(SankeyDiagram.LinkLabelTextsSelector.selectorName);
let linkLabelTextSelectionData: UpdateSelection<SankeyDiagramLink> = linkLabelTexts
.data(linkTextData);
linkLabelTextSelectionData
.exit()
.remove();
let linkLabelTextSelectionEnter = linkLabelTextSelectionData
.enter()
.append("text");
let linkLabelTextSelectionMerged = linkLabelTextSelectionEnter.merge(linkLabelTexts);
linkLabelTextSelectionMerged
.attr("text-anchor", "middle")
.classed(SankeyDiagram.LinkLabelTextsSelector.className, true);
let textPathSelection: UpdateSelection<SankeyDiagramLink> = linkLabelTextSelectionMerged
.selectAll("textPath");
let textPathSelectionData = textPathSelection.data(data => [data]);
textPathSelectionData
.exit()
.remove();
let textPathSelectionEnter = textPathSelectionData
.enter()
.append("textPath");
let textPathSelectionMerged = textPathSelectionEnter.merge(textPathSelection);
textPathSelectionMerged
.attr("startOffset", "50%")
.attr(
"href", (link: SankeyDiagramLink) => {
return `#${SankeyDiagram.createLink(link, true)}`;
})
.style("font-size", this.dataView.settings.linkLabels.fontSize)
.style("fill", this.dataView.settings.linkLabels.fill)
.text((link: SankeyDiagramLink) => (link.label && (link.label.length > 0)) ? link.label :
`${link.source.label.name || ""}-${link.destination.label.name || ""}:${(link.tooltipInfo[2] || { value: "" }).value}`
);
}