相关疑难解决方法(0)

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

我在g标签中使用z-index 来显示第一个元素.在我的项目中,我只需要使用z-index值,但我不能将z-index用于我的svg元素.我google了很多,但我找不到任何相对的东西.所以请帮我在我的svg中使用z-index.

这是DEMO.

使用D3库将SVG元素置于z顺序顶部的有效方法是什么？

我的特定情况是一个饼图其中突出(通过添加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是一个选项,但我不清楚如何将"选定"元素置于顶部.

更新:

我使用以下代码修复了我的特殊情况,该代码在mouseover事件上向SVG添加了一个新弧以显示突出显示.

svg.selectAll("path")
    .data(d)
  .enter().append("path")
    .attr("d", arc)
    .attr("class", "arc")
    .style("fill", function(d) { return color(d.name); …

如何在创建后重新排序Raphael或其基础SVG元素.更好的是,在SVG中存在类似层的东西吗？

理想情况下,我希望在任何时候放置元素的两层或更多层; 背景和前景层.如果这不是一个选项,那么将元素弹出到前面就可以了,在这种特殊情况下将它推到后面会更好.

谢谢,

首先,我使用d3.js在数组中显示不同大小的圆圈.鼠标悬停时,我希望将鼠标悬空变大,这是我可以做的,但我不知道如何把它带到前面.目前,一旦渲染,它就隐藏在多个其他圈子后面.我怎样才能解决这个问题？

这是一个代码示例:

   .on("mouseover", function() { 
    d3.select(this).attr("r", function(d) { return 100; })
  })

我尝试使用排序和顺序方法,但它们不起作用.我很确定我没有正确地做到这一点.有什么想法吗？

在我正在构建的地图框应用程序中,我根据用户的地理位置将多个标记加载到页面上,但问题是我需要某些标记高于其他标记,但标记不zIndex符合我设置的标记.这是我的代码.

function addMarker(type, radius, height, lat, long, id, special, name) {
    var circle_options;
    switch (type) {
        case marker.RESTRICTED:
            circle_options = {
                color: '#D90000',
                fillColor: '#D90000',  // Fill color
                fillOpacity: 0.4,    // Fill opacity
                stroke: false,
                zIndexOffSet: -1

            };
            break;

        case marker.NOT_RECOMMENDED:
            circle_options = {
                color: '#FF8000',
                fillColor: '#FF8000',  // Fill color
                fillOpacity: 0.75,    // Fill opacity
                stroke: false,
                zIndexOffSet: 1000

            };
            break;
        case marker.USER_RECOMMENDED:
            circle_options = {
                color: '#9FCC1C',
                fillColor: '#9FCC1C',  // Fill color
                fillOpacity: 0.75,    // Fill …

我显示了大量的跟踪线。通常为 50-200。我正在将历史数据与模拟数据进行比较。我想通过选择不同的颜色来突出显示单个模拟轨迹线。所有这些工作正常。

但是，显示的跟踪线有时会被大量其他线隐藏。除了重绘整个图并最后添加那条线之外，有没有办法强制将指定的轨迹绘制在其他轨迹之上？某种 z-index 等效或“带到前面”机制？

我试图plotBand在轴下方放置一个刻度，但它的标签在它们上方。

由于标签继承了带区的 zIndex 并且无法指定此属性，是否有一种方法不需要我在绘制图形后更改 zIndex？

请参阅此处的示例，我希望标签出现在 yAxis 刻度前面。

我在这里看到了一个潜在的解决方案，但想知道是否有更好的方法来完成它。

我正在使用谷歌图表并且对 API 非常陌生，现在最有可能满足我的要求的是Combo Chart，这个图表对所有东西都很好，但只有一件事很奇怪，

当我尝试使用烛台绘制线条时，无论哪个series在seriesType烛台中，另一个在烛台中，烛台始终位于线条之上，是否有解决此问题的方法？

编辑

我想要做的是我有一些 OHLC 数据，我想绘制一个烛台图或一个 OHLC 图表，任何都可以工作，然后我想在它上面绘制一条趋势线。

我目前没有图像，但它可能看起来像这样

我只是想说，我并没有被谷歌 api 困住，如果你有任何其他能够做到这一点的 api，请推荐给我，但当然是免费的 api。

如果 api 让我在上面画我想要的东西会更好。

我选择 google api 因为它是完整和受支持的。

我正在做强制布局,在事件点击我添加新节点并按行连接.但是线重叠了节点.为什么？我的代码显示为http://jsfiddle.net/WRGtL/

function click(d) {
  if (d3.event.defaultPrevented) return; // ignore drag
  //alert("clicked");
  var d = {id:"d"};
  nodes.push(nodeId[index]);
  if(index==0)
  links.push({source: a, target: nodeId[index]});
      else
      links.push({source: nodes[1], target: nodeId[index]});
  index++;
  start();
}