选择特定元素并更改其中一个元素的样式

Question

现在我正在使用饼图 (d3.js) 并且有一个小问题。 饼图的每个部分都会在饼图外的旁边获得一个带有值的标签。当下面有多个值时，假设 5% 它们相互重叠并且值变得不可读。

我的价值观是用

生成的

}).attr("text-anchor", "middle")
.text(function(d, i) {
    if (config.unit === "%") {
        return jsonChartData.dataRows[0].values[i] + ": " + jsonChartData.dataRows[0].numbers[i] + jsonChartData.unit;
    } else {
        return jsonChartData.dataRows[0].values[i] + ": " + jsonChartData.dataRows[0].numbers[i];
    }                           
});

应该检查其值的部分是

 jsonChartData.dataRows[0].numbers[i]

现在我想将重叠元素的不透明度降低到 0.4，除了最高的元素。我什至不知道这是否是最好的解决方案（也许在移动设备上悬停/点击时可以更改此元素的不透明度？）。

由于我对 JavaScript 很陌生，因此非常感谢您对这个问题的帮助。

Answer 1

我认为改变悬停时的不透明度可能会很好地解决这个问题。将此附加到您的文本元素：

.on('mouseover', function(d){
    var currentText = this;
    d3.selectAll('.pie-text').transition().style('opacity',function () {
       return (this === currentText) ? 1 : 0.4;
});

假设文本元素具有“pie-text”类。这将使所有文本在悬停时获得 0.4 的不透明度，鼠标下的文本除外。这是改编自这个答案：Equivalent of jQuery's 'not' selector in D3.js?。

如果您想在鼠标离开文本后将不透明度改回 1，则还需要附加一个 mouseout 事件。

.on('mouseout', function(d){
    d3.selectAll('.pie-text').transition().style('opacity', 1)
;

使用这些想法，您可以默认隐藏文本，并使其仅在将鼠标悬停在饼图上时出现，但我将由您决定。