相关疑难解决方法(0)

如何在svg元素中使用z-index?

我在我的项目中使用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.

javascript jquery svg z-index

140
推荐指数
11
解决办法
18万
查看次数

使用JavaScript,我可以更改SVG <g>元素的Z索引/层吗?

假设我有几个复合形状(<g>).我希望能够点击并拖动它们,但是我希望我碰巧在Z顺序中将其拖动到另一个的TOP上,这样如果我将它拖到其他的那个上,那么另一个一个人应该黯然失色.

javascript svg

82
推荐指数
5
解决办法
8万
查看次数

用箭头连接可变半径的节点

我有一些不同半径的圆/节点,我必须用箭头末端的路径连接它们.

这是标记的代码:

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)

我已将圆的半径存储在数组中.这是屏幕截图:

在此输入图像描述

箭头实际上是"圈内".如何让箭头位于圆圈表面?

javascript svg graph d3.js

6
推荐指数
2
解决办法
2322
查看次数

如何将所选节点置于d3 js前面?

我正在使用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)

javascript css html5 data-driven d3.js

6
推荐指数
2
解决办法
1427
查看次数

标签 统计

javascript ×4

svg ×3

d3.js ×2

css ×1

data-driven ×1

graph ×1

html5 ×1

jquery ×1

z-index ×1