1
基于我以前的问题How to center (horizontal and vertical) text along an textPath inside an arc using d3.js?，我想知道如何使用鼠标悬停和鼠标悬停事件突出显示圆弧的边界。D3在鼠标悬停时改变路径笔画颜色
请看下面的示例代码。如果我将鼠标移到弧上，边框会变黑。但不完全。它看起来像突出显示的边框被相邻的弧/路径元素覆盖。
（？）是否有办法完全改变边框的颜色，而不仅仅是其中的一部分？
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;
})
\t .on('mouseover', function (d) {
\t \t \t d3.select(this).style('stroke', 'black');
\t })
.on('mouseout', function (d) {
\t \t \t d3.select(this).style('stroke', '#e1e1e1');
\t });
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>