1
basierend auf meiner früheren Frage How to center (horizontal and vertical) text along an textPath inside an arc using d3.js?, würde ich gerne wissen, wie die Grenzen des Bogens mit Mouseover und Mouseout-Ereignis zu markieren.D3 Ändern der Farbe des Pfads Schlag auf Mouseover
Bitte sehen Sie sich den folgenden Beispielcode an. Wenn ich die Maus über einen Bogen bewege, wird der Rand schwarz. Aber nicht total. Es sieht so aus, als ob der markierte Rahmen von den benachbarten Bogen-/Pfadelementen überschrieben wird.
(?) Gibt es eine Möglichkeit, die Farbe der Grenze vollständig zu ändern, nicht nur Teile davon?
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>