Question

我想将鼠标悬停在路径上并选择该行以更改其颜色。

svg.append("svg:path")
    .style( {
        "fill": "orange",
        "stroke": "cyan",
        "stroke-width": "5",
    } )
    .attr("d", "M 121.5, 268.5 A 994.15, 994.15 0 0, 1 514.8, 348.3")
    .on ("mouseover", function (d) {
        d3.select(this).style( "stroke", "green" ) } )
    .on ("mouseout", function (d) {
        d3.select(this).style( "stroke", "cyan" ) } );

但正如在小提琴中所展示的那样，即使我将鼠标移到曲线下方的区域（即小提琴中的橙色区域），也会选择路径。相反，我希望线只在鼠标移过青色线时改变颜色。

Fiddle example here

Answer 1

单向是使填充无这样

svg.append("svg:path")
    .style( {
        "fill": "none",//make it none
        "stroke": "cyan",
        "stroke-width": "5",
    } )
    .attr("d", "M 121.5, 268.5 A 994.15, 994.15 0 0, 1 514.8, 348.3")
    .on ("mouseover", function (d)
    {
        d3.select(this)
            .style( "stroke", "green" )
    } )
    .on ("mouseout", function (d)
    {
        d3.select(this)
            .style( "stroke", "cyan" )
    } )
    ;

工作小提琴here

另一种方式，以防您需要橙色填充。

在旧路径下面添加一条新路径，如下所示：

//add a dummy path with fill orange but no listeners
svg.append("svg:path")
    .style( {
        "fill": "orange",
        "stroke": "cyan",
        "stroke-width": "5",
    } )
    .attr("d", "M 121.5, 268.5 A 994.15, 994.15 0 0, 1 514.8, 348.3");
    //add a new path with fill none so that its over the other path

svg.append("svg:path")
    .style( {
        "fill": "none",
        "stroke": "cyan",
        "stroke-width": "5",
    } )
    .attr("d", "M 121.5, 268.5 A 994.15, 994.15 0 0, 1 514.8, 348.3")
    .on ("mouseover", function (d)
    {
        d3.select(this)
            .style( "stroke", "green" )
    } )
    .on ("mouseout", function (d)
    {
        d3.select(this)
            .style( "stroke", "cyan" )
    } )
    ;

工作小提琴here

希望这有帮助！

Answer 2

最简单的方法可能是使用https://docs.angularjs.org/guide/directive#creating-directives-that-communicate来限制元素的哪些部分可能成为鼠标事件的目标。这可以通过设置CSS样式来完成：

.style("pointer-events", "stroke")

或通过设置属性

.attr("pointer-events", "stroke")

以下代码段实现了两种方式的示例：

＆＃13;

var svg = d3.select("body")
    .append("svg")
    .attr("width", 555)
    .attr("height", 500)
	.style( "border", "1px solid #0000ff")
    .append("g")

svg.append("svg:path")
    .style( {
    	"fill": "orange",
    	"stroke": "cyan",
    	"stroke-width": "5",
        "pointer-events": "stroke"
	} )
    .attr("d", "M 121.5, 268.5 A 994.15, 994.15 0 0, 1 514.8, 348.3")
	.on ("mouseover", function (d)
	{
    	d3.select(this)
        	.style( "stroke", "green" )
	} )
	.on ("mouseout", function (d)
	{
    	d3.select(this)
        	.style( "stroke", "cyan" )
	} )
	;

svg.append("svg:path")
    .style( {
    	"fill": "orange",
    	"stroke": "cyan",
    	"stroke-width": "5"
	} )
    .attr("d", "M 70.4, 388.25 A 784.8, 784.8 0 0, 1 384.7, 428.2")
    .attr("pointer-events", "stroke")
	.on ("mouseover", function (d)
	{
    	d3.select(this)
        	.style( "stroke", "green" )
	} )
	.on ("mouseout", function (d)
	{
    	d3.select(this)
        	.style( "stroke", "cyan" )
	} )
	;

svg.append("svg:path")
    .style( {
    	"fill": "orange",
    	"stroke": "cyan",
    	"stroke-width": "5",
        "pointer-events": "stroke"
	} )
    .attr("d", "M 384.7, 428.2 A 490.5, 490.5 0 0, 1 501.8, 268.5")
	.on ("mouseover", function (d)
	{
    	d3.select(this)
        	.style( "stroke", "green" )
	} )
	.on ("mouseout", function (d)
	{
    	d3.select(this)
        	.style( "stroke", "cyan" )
	} )
	;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

d3 onmouseover path事件选择行

2 个答案: