mutable chartInternal = {
const svg = d3.select(DOM.svg(width, height))
.style("background", "#fff")
.style("width", "100%")
.style("height", "auto");
const {nodes, links} = sankey({
nodes: traffickingSankeyInternal.nodes,
links: traffickingSankeyInternal.links
});
tooltip
svg.append("g")
.selectAll("rect")
.data(traffickingSankeyInternal.nodes)
.join("rect")
.attr("x", d => d.x0)
.attr("y", d => d.y0)
.attr("height", d => d.y1 - d.y0)
.attr("width", d => d.x1 - d.x0)
.style("fill", d=>color(d.name))
.append("title")
.text(function(d) {
if (d.name==""){
d.name="Unknown Country"
return (`Unknown Country\n${d.value.toLocaleString()}`)
}
return(`${d.name}\n${d.value.toLocaleString()}`)
});
svg.append("g")
.attr("fill", "none")
.selectAll("g")
.data(links)
.join("path") // create/koin path
.attr("d", d3.sankeyLinkHorizontal())
.attr("stroke", d => color(d.names[0])) // color path
.attr("stroke-width", d => d.width) // set width to dataset width
.style("opacity", .55) // set opacity
.on("mouseover", function(d) {
tooltip.style("visibility", "visible").text(d.names[0] + " to " + d.names[1] + ": " + d.value.toLocaleString() + " persons trafficked.\n" + d.names[0] + " Global GDP Ranking: " + d.gdpRanking)
d3.select(this)
.transition()
.style("opacity", 1.0) // HELP NEEDED HERE - CAN'T GET OPACITY TO TRANSITION
})
.on("mousemove", function(d) {
tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px").text(d.names[0] + " to " + d.names[1] + ": " + d.value.toLocaleString() + " persons trafficked.\n" + d.names[0] + " Global GDP Ranking: " + d.gdpRanking)
d3.select(this)
.transition()
.style("opacity", 1.0) // HELP NEEDED HERE - CAN'T GET OPACITY TO TRANSITION
})
.on("mouseout", function(d) {
tooltip.style("visibility", "hidden")
d3.select(this)
.transition()
.style("opacity", 0.55) // HELP NEEDED HERE - CAN'T GET OPACITY TO TRANSITION
})
.style("mix-blend-mode", "multiply");
// .append("title")
// .text(d => `${d.names.join(" to ")}\n${d.value.toLocaleString()}`)
// .attr("font", "20px sans-serif")
svg.append("g")
.selectAll("text")
.data(nodes)
.join("text")
.attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) // define position of text
.attr("y", d => (d.y1 + d.y0) / 2)
.attr("dy", "0.35em")
.attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")
.text(d => d.name)
.style("font", "10px Avenir") // define text for paths
.style("font-size", d=>`${(d.y1-d.y0) *0.13}px`) // HELP NEEDED HERE - CAN'T GET FONT TO SCALE PROPERLY
.append("tspan")
.attr("fill-opacity", 0.7)
.text(d => ` \n${d.value.toLocaleString()}`);
return svg.node();
}