0
148
ViewsConnecting border lines in D3 JS county map of US on hover
I have a JavaScript D3 map of the U.S., and I am trying to create a "shadow" effect on hover, with an evenly distributed border line. My code (below), does have some of the desired effect, but the borders are not manifesting in full. The screenshot below is from hover over one county as an example.
My js file looks like:
# collect the map, set up nation and counties
d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json").then(
function(us) {
svg.append("path")
.datum(topojson.feature(us, us.objects.nation))
.attr("fill", "#f5f5f5")
.attr("class", "nation")
.attr("d", path)
svg.selectAll("path.county")
.data(topojson.feature(us, us.objects.counties).features)
.join("path")
.attr("id", function(d) {
return d["id"]
})
.attr("class", "county")
.attr("fill", "#f5f5f5")
.attr("stroke", "#ffffff")
.attr("stroke-linejoin", "round")
.attr("d", path)
# add in my data
d3.csv("file.csv").then(
function(data) {
...
data.forEach(function(d) {
d3.select(`[id="${d['FIPS']}"]`)
.attr("fill", function() {
if (d["URL"] != "") {return getColor()}
else {return "#f5f5f5"}
})
.on("mouseover", function() {
d3.select(`[id="${d['FIPS']}"]`)
.style("stroke", "rgba(35, 31, 32, 0.1)")
.style("stroke-width", 2)
})
.on("mouseout", function() {
d3.select(`[id="${d['FIPS']}"]`)
.style("stroke", "#ffffff")
.style("stroke-width", 1)
})
}
)
}
)
1 answers
Answer question0
Try node.parentElement.appendChild(node);
Upon further review, z-index is not supported within SVG 1.1.
Instead of using z-index, SVG implements the painter’s algorithm to find the elements that are behind the selected element. This means that whichever element follows within the dom, that element will be on top of the other elements (like they were painted later). So that means that all you need to do to bring an element to the front is to reorder the element in the dom to make it the last sibling node. So all you need to do is this:
d3.select(`[id="${d['FIPS']}"]`)
...
this.parentElement.appendChild(this);
}