我在我的项目中使用svg圈子,
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
<g>
<g id="one">
<circle fill="green" cx="100" cy="105" r="20" />
</g>
<g id="two">
<circle fill="orange" cx="100" cy="95" r="20" />
</g>
</g>
</svg>
Run Code Online (Sandbox Code Playgroud)
我在g标签中使用z-index 来显示第一个元素.在我的项目中,我只需要使用z-index值,但我不能将z-index用于我的svg元素.我google了很多,但我找不到任何相对的东西.所以请帮我在我的svg中使用z-index.
这是DEMO.
假设我有几个复合形状(<g>).我希望能够点击并拖动它们,但是我希望我碰巧在Z顺序中将其拖动到另一个的TOP上,这样如果我将它拖到其他的那个上,那么另一个一个人应该黯然失色.
我有一些不同半径的圆/节点,我必须用箭头末端的路径连接它们.
这是标记的代码:
svg.append("svg:defs").selectAll("marker")
.data(["default"])
.enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 5)
.attr("refY", -1.5)
.attr("markerWidth", 10)
.attr("markerHeight", 10)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M1,-5L10,0L0,5");
Run Code Online (Sandbox Code Playgroud)
我已将圆的半径存储在数组中.这是屏幕截图:

箭头实际上是"圈内".如何让箭头位于圆圈表面?
我正在使用d3v3脚本来可视化数据.我需要在mouseleave中突出显示并将节点置于鼠标中心,反之亦然.现在,我可以通过增加节点的高度和宽度来高亮点亮节点.
无法将节点带到前面.我尝试过使用像opacity,z-index这样的CSS.
脚本
<script>
// some colour variables
var tcBlack = "purple";
// rest of vars
var w = 1500,
h = 800,
maxNodeSize = 50,
x_browser = 25,
y_browser = 25,
root;
var vis;
var force = d3.layout.force();
vis = d3.select("#visfel_map").append("svg").attr("width", w).attr("height", h);
d3.json(url, function(error,json) {
if (error)
return console.warn(error);
root = json;
root.fixed = true;
root.x = w / 2;
root.y = h / 4;
// Build the path
var defs = vis.insert("svg:defs")
.data(["end"]);
defs.enter().append("svg:path")
.attr("d", …Run Code Online (Sandbox Code Playgroud)