1
以前の質問How to center (horizontal and vertical) text along an textPath inside an arc using d3.js?に基づいて、mouseoverとmouseoutイベントを使用して弧の境界線を強調する方法を知りたいと思います。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>