Обновление SVG Element Z-Index с помощью D3
Как эффективно вывести элемент SVG на вершину z-порядка, используя библиотеку D3?
Мой конкретный сценарий представляет собой круговую диаграмму, которая выделяет (добавивstroke
кpath
) когда мышь находится над данной частью. Блок кода для генерации моего графика ниже:
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);
});
Я попробовал несколько вариантов, но пока не повезло. С помощьюstyle("z-index")
и звонитclassed
оба не работали.
Класс "top" определяется в моем CSS следующим образом:
.top {
fill: red;
z-index: 100;
}
fill
заявление, чтобы убедиться, что я знал, что он включается / выключается правильно. Это.
Я слышал, используяsort
это вариант, но мне неясно, как это будет реализовано для того, чтобы вывести «выбранный» элемент наверх.
ОБНОВИТЬ:
Я исправил мою конкретную ситуацию с помощью следующего кода, который добавляет новую дугу в SVG наmouseover
событие, чтобы показать изюминку.
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();
});