Cách hiệu quả để đưa phần tử SVG lên đầu thứ tự z, sử dụng thư viện D3 là gì?
Kịch bản cụ thể của tôi là một biểu đồ hình tròn sẽ làm nổi bật (bằng cách thêm a strokevào path) khi chuột đi qua một phần nhất định. Khối mã để tạo biểu đồ của tôi là bên dưới:
svg.selectAll("path")
.data(d)
.enter().append("path")
.attr("d", arc)
.attr("class", "arc")
.attr("fill", function(d) { return color(d.name); })
.attr("stroke", "#fff")
.attr("stroke-width", 0)
.on("mouseover", function(d) {
d3.select(this)
.attr("stroke-width", 2)
.classed("top", true);
//.style("z-index", 1);
})
.on("mouseout", function(d) {
d3.select(this)
.attr("stroke-width", 0)
.classed("top", false);
//.style("z-index", -1);
});
Tôi đã thử một vài lựa chọn, nhưng không có may mắn cho đến nay. Sử dụng style("z-index")và gọi điện classedđều không hoạt động.
Lớp "top" được định nghĩa như sau trong CSS của tôi:
.top {
fill: red;
z-index: 100;
}
Các filltuyên bố là có để chắc chắn rằng tôi biết nó đã được bật / tắt một cách chính xác. Nó là.
Tôi đã nghe nói sử dụng sortlà một tùy chọn, nhưng tôi không rõ về cách nó sẽ được triển khai để đưa phần tử "đã chọn" lên đầu.
CẬP NHẬT:
Tôi đã khắc phục tình huống cụ thể của mình bằng đoạn mã sau, mã này sẽ thêm một vòng cung mới vào SVG trên mouseoversự kiện để hiển thị điểm nổi bật.
svg.selectAll("path")
.data(d)
.enter().append("path")
.attr("d", arc)
.attr("class", "arc")
.style("fill", function(d) { return color(d.name); })
.style("stroke", "#fff")
.style("stroke-width", 0)
.on("mouseover", function(d) {
svg.append("path")
.attr("d", d3.select(this).attr("d"))
.attr("id", "arcSelection")
.style("fill", "none")
.style("stroke", "#fff")
.style("stroke-width", 2);
})
.on("mouseout", function(d) {
d3.select("#arcSelection").remove();
});