renderLinks = ({ svg, links, color }) => {
const link = svg
.select(".links")
.selectAll(".sankey-chart-link")
.data(
links,
(d, i) => `${d.source.name}-${d.target.name}`
)
.join(
(enter) => {
const g = enter
.append("g")
.attr("class", "sankey-chart-link")
.style("mix-blend-mode", "none");
g.append("title").text(
(d) => `${d.source.name} → ${d.target.name} : ${d.value}`
);
const linkEl = g
.append("path")
.attr("class", (d) => d.source.name)
.attr("fill", "none")
.attr("stroke-width", 0.1)
.attr("d", Sankey.sankeyLinkHorizontal())
.attr(
"id",
(d, i) => "linklabel_" + i
// d.source.index +
// "_" +
// d.target.index
)
.style("opacity", 0.65)
.transition()
.duration(2000)
.attr("stroke", (d) => {
const match = series.indexOf(d.dataItem?.OC.series); //selectedDataSearch(d.dataItem?.OC.series);
if (match >= 0) {
// temp.push(match);
return color(match);
}
return color(expirations.indexOf(d.source.name));
})
.attr("stroke-width", (d) => Math.max(1, d.width));
// linkLength.push(linkEl.node());
g.append("text")
.style("mix-blend-mode", "lighten")
.append("textPath")
.attr("alignment-baseline", "middle")
.attr(
"href",
(d, i) => "#linklabel_" + i
// d.source.name +
// "_" +
// d.target.name +
// "_" +
// d.source.index +
// "_" +
// d.target.index
)
.attr("fill", (d) => "#666") //color(d.source.dataItem.expiry))
// .attr('stroke', 'black')
// .attr('stroke-width', '0.5')
.attr("font-size", labelSize)
.attr("startOffset", width / 6)
.style("pointer-events", "none")
.attr("text-anchor", "middle")
.text((d) => {
return d.source.name;
// return d.source.depth === 0
// ? `${d.value} OI`
// : d.source.depth === 1
// ? `${d.value} Vol`
// : d.source.depth === 2
// ? `${d.value} OIC`
// : "";
})
.style("opacity", 1);
},
(update) => {
update
.select("path")
// .attr("id", (d, i) => "linklabel" + i)
.transition()
.duration(2000)
.attr("d", Sankey.sankeyLinkHorizontal())
.attr("stroke-width", (d) => Math.max(1, d.width))
.attr(
"id",
(d, i) => "linklabel_" + i
// "linklabel_" +
// d.source.name +
// "_" +
// d.target.name +
// "_" +
// d.source.index +
// "_" +
// d.target.index
)
.attr("stroke", (d) => {
const match = series.indexOf(d.dataItem?.OC.series); //selectedDataSearch(d.dataItem?.OC.series);
if (match >= 0) {
// temp.push(match);
return color(match);
}
return color(expirations.indexOf(d.source.name));
});
update
.select("textPath")
.transition()
.duration(2000)
.attr(
"href",
(d, i) => "#linklabel_" + i
// "#linklabel_" +
// d.source.name +
// "_" +
// d.target.name +
// "_" +
// d.source.index +
// "_" +
// d.target.index
)
.text((d) => {
return d.source.name;
// return d.source.depth === 0
// ? `${d.value} OI`
// : d.source.depth === 1
// ? `${d.value} Vol`
// : d.source.depth === 2
// ? `${d.value} OIC`
// : "";
});
//d => d.target.name + ' ' + d.referrer);
},
(exit) => {
exit
.call((g) =>
g
.select("path")
.transition()
.duration(1500)
.attr("stroke-width", (d) => 1)
)
.transition()
// .duration(1000)
.delay(1000)
.remove();
}
);
}