javascript - D3 在鼠标悬停时更改路径描边的颜色

Question

基于我之前的问题How to center (horizontal and vertical) text along an textPath inside an arc using d3.js? ，我想知道如何使用 mouseover 和 mouseout 事件突出显示圆弧的边界。

请看下面的示例代码。如果我将鼠标移到圆弧上，边框会变黑。但不完全是。看起来突出显示的边框被相邻的弧线/路径元素覆盖。

(？)有没有办法完全改变边框的颜色，而不仅仅是部分颜色？

var dataset = {
    "2":[{"degree1":0,"degree2":1.5707963267949,"label":"Sample Text Test"},    
         {"degree1":1.5707963267949,"degree2":3.1415926535898,"label":"Lorem ipsum sample text"},
         {"degree1":3.1415926535898,"degree2":4.7123889803847,"label":"Sample Text Text"},
         {"degree1":4.7123889803847,"degree2":6.2831853071796,"label":"Lorem ipsum"}],
    "1":[{"degree1":0,"degree2":3.1415926535898,"label":"Sample"},
         {"degree1":3.1415926535898,"degree2":6.2831853071796,"label":"Text"}],
    "0":[{"degree1":0,"degree2":6.2831853071796,"label":""}]
    },
    width   = 450,
    height  = 450,
    radius  = 75;

// Helper methods
var innerRadius = function(d, i, j) {
    return 1 + radius * j;
};

var outerRadius = function(d, i, j) {
    return radius * (j + 1);
};

var startAngle = function(d, i, j) {
    return d.data.degree1;
};

var endAngle = function(d, i, j) {
    return d.data.degree2;
};

var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius)
    .startAngle(startAngle)
    .endAngle(endAngle);

function centerRadius(d, i, j) {
    return innerRadius(d, i, j) / 2 + outerRadius(d, i, j) / 2;
}

var labelArc = d3.svg.arc()
    .innerRadius(centerRadius)
    .outerRadius(centerRadius)
    .startAngle(startAngle)
    .endAngle(endAngle);

var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height)
    .append('g')
    .attr('transform', 'translate(' + (width >> 1) + ',' + (height >> 1) + ')');

var level = svg.selectAll('g')
    .data(function(d) {
        return d3.values(dataset);
    })
    .enter()
    .append('g');

var entry = level.selectAll('g')
    .data(function(d, i) {
        return pie(d);
    })
    .enter()
    .append('g');

entry.append('path')
    .attr('fill', '#aaa')
    .attr('class', 'border')
    .attr('d', arc)
    .attr('id', function(d, i, j) {
        return 'arc' + i + '-' + j;
    })
	.on('mouseover', function (d) {
			d3.select(this).style('stroke', 'black');
	})
  .on('mouseout', function (d) {
			d3.select(this).style('stroke', '#e1e1e1');
	});

entry.append('path')
  .attr('fill', 'none')
  .attr('stroke', 'none')
  .attr('d', labelArc)
  .attr('id', function (d, i, j) {
      return 'arc-label' + i + '-' + j;
  });

var label = entry.append('text')
    .style('font-size', '20px')
    .attr('text-anchor', 'middle');
/*    .attr('dx', function(d, i, j) {
        return Math.round((d.data.degree2 - d.data.degree1) * 180 / Math.PI);
    })
    .attr('dy', function(d, i, j) {
        return ((radius * (j + 1)) - (1 + radius * j)) >> 1;
    }); */


label.append('textPath')
    .attr('startOffset', '25%')
    .attr('xlink:href', function(d, i, j) {
        return '#arc-label' + i + '-' + j;
    })
    .style('fill', '#000')
    .text(function(d) {
        return d.data.label;
    });

text {

    font-family: Verdana;

}

path.border {
    stroke: #e1e1e1;
    stroke-width: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div style="font-family: Verdana; font-size: 20px;">Lorem ipsum sample text</div>

Answer 1

问题是你经过的路径在另一条路径后面。所以描边线的宽度沿着路径是不同的(原因是一些路径在另一条路径后面)。

您可以通过重新附加发生悬停/鼠标悬停的组来解决此问题，以使鼠标悬停在顶部的路径上。

 .on('mouseover', function(d) {
    this.parentNode.parentNode.appendChild(this.parentNode);//the path group is on the top with in its parent group
    this.parentNode.parentNode.parentNode.appendChild(this.parentNode.parentNode);//the parent group is on the top with in its parent group
    d3.select(this).style('stroke', 'black');
  })

这将使您悬停在其上的组最终重新附加，因此所有边框笔划线都将可见。

工作代码here