相关疑难解决方法(0)

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

使用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); …

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

这是一个代码示例:

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

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

我怎么知道我的浏览器是否支持SVG 2.0？

(除了尝试一个应该在SVG2中工作并且意识到它不起作用或它有效的功能......？)

有没有办法如何在SVG路径上应用z-index？

我有简单的SVG箭头:

<svg class="arrow">
  <path class="line" />
  <path class="endpoint"/>
</svg>

如果我使用css来整个z-index整个.arrow一切正常,但是当我尝试仅应用它时.endpoint它不起作用.

这有什么解决方案或解决方法吗？

非常感谢你.

在使用我的组对数据进行分类之后,我希望将enter选择中的元素添加到g顶部/最高的组(-element)中.默认是附加到底部.

这样做的原因是我希望对象在视觉上出现在所有准备好的可见对象下面.

我知道我可以订购和排序,但我认为可能有更简单/更好的方法来做到这一点.我做了几件手工的事情,后来发现"噢,他们包含了一种聪明的方法来做到这一点,很容易."

如果我有一个带有单击处理程序的简单按钮和一个自定义属性指令,如下所示:

<button  (click)="save()" attributedirective="project saved">Save</button>

在我的属性指令中,我使用hostlistener装饰器来监听click事件:

@Directive({
    selector: `[attributedirective]`
})
export class AuditPusher {
    @Input('attributedirective') attributedirective: string = 'Missing message!';

    @HostListener('click', ['$event'])
    pushAudit() {
        console.log('text:'+this.attributedirective.toString());
    }
}

我的哪个代码会首先启动？click事件的save()或属性指令中的代码？ - 并且:想象一下有两个属性指令.哪个会首先开火？在Angular 1中有类似指令的优先级,在Angular 2中是如何完成的？我发现很难找到相关的文档.