D3 changer la couleur de la course du chemin sur mouseover

Question

basé sur ma précédente question How to center (horizontal and vertical) text along an textPath inside an arc using d3.js?, je voudrais savoir comment mettre en évidence les frontières de l'arc en utilisant l'événement mouseover et mouseout.

Veuillez jeter un oeil à l'exemple de code suivant. Si je déplace la souris sur un arc, la bordure devient noire. Mais pas totalement. Il semble que la bordure en surbrillance soit écrasée par les éléments arc/chemin voisins.

(?) Existe-t-il un moyen de changer complètement la couleur de la bordure, et pas seulement des parties de celle-ci?

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>

Answer 1

Le problème est le chemin que vous êtes plus est derrière un autre chemin. La largeur de ligne de trait est donc différente le long du chemin (certains chemins sont derrière un autre chemin).

Vous pouvez résoudre ce problème en ré-ajoutant le groupe sur lequel le survol/le survol de la souris survient, de manière à faire passer le pointeur de la souris en haut.

.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'); 
    }) 

Cela rendra le groupe sur lequel vous placez le curseur reappended être à la fin et ainsi toutes les lignes de temps à la frontière seront visibles.

code de fonctionnement here