使用D3库将SVG元素置于z顺序顶部的有效方法是什么?
我的特定情况是一个饼图其中突出(通过添加stroke到path)当鼠标在给定的片。生成我的图表的代码块如下:
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均无效。
style("z-index")
classed
在我的CSS中,“ top”类的定义如下:
.top { fill: red; z-index: 100; }
该fill语句可以确保我知道它正确打开/关闭。它是。
fill
我听说过使用sort是一个选项,但是我不清楚如何将“ selected”元素置于顶部。
sort
更新:
我使用以下代码修复了我的特殊情况,该代码在mouseover事件中为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(); });
开发人员提出的解决方案之一是:“使用D3的sort运算符对元素进行重新排序”。
有鉴于此,人们可以通过比较元素的数据或元素的位置(如果它们是无数据元素)来对元素进行排序:
.on("mouseover", function(d) { svg.selectAll("path").sort(function (a, b) { // select the parent and sort the path's if (a.id != d.id) return -1; // a is not the hovered element, send "a" to the back else return 1; // a is the hovered element, bring "a" to the front }); })