Question

基于我以前的问题expected complexity，我想知道如何使用mouseover和mouseout事件突出显示弧的边框。

请查看以下示例代码。如果我将鼠标移动到弧形上，边框会变黑。但并非如此。看起来突出显示的边框会被相邻的弧/路径元素覆盖。

（？）有没有办法完全改变边框的颜色，而不仅仅是它的一部分？

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

问题是你所走的道路落后于另一条道路。因此沿着路径的笔划线宽度是不同的（因为某些路径在另一条路径后面）。

您可以通过重新附加发生悬停/鼠标悬停的组来修复此问题，以便将鼠标悬停在顶部的路径上。

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

这将使您悬停的组最后重新悬浮，因此所有边框描边线都将可见。

工作代码here

D3在鼠标悬停时改变路径笔划的颜色

1 个答案: