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

时间:2016-02-22 13:44:33

标签: javascript jquery html css d3.js

现在我正在使用饼图(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很陌生,我非常感谢这个问题的一些帮助。

1 个答案:

答案 0 :(得分:2)

我认为在悬停时改变不透明度可能对此有用。将其附加到您的文本元素:

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

使用这些想法,您可以默认隐藏文字,并使其仅在将鼠标悬停在饼图上时显示,但我会将其留给您。