D3 changing color of path stroke on mouseover

Question

based on my former question How to center (horizontal and vertical) text along an textPath inside an arc using d3.js?, I would like to know how to highlight the borders of the arc using mouseover and mouseout event.

Please take a look at the following sample code. If I move the mouse over an arc the border gets black. But not totally. It looks like the highlighted border is overwritten by the neighboring arc/path elements.

(?) Is there a way to fully change the color of the border, not only parts of it?

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

The problem is the path you are over is behind another path. So the stroke line width is different along the path (reason some paths are behind another path).

You can fix this problem by re-appending the group on which hover/mouse over happens, so as to make the mouse over path on the top.

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

This will make the group on which you hover be reappended in the end and so all the border stroke lines will be visible.

working code here