现在我正在使用饼图 (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 的新手,我非常感谢您对这个问题的帮助。
最佳答案
我认为在悬停时改变不透明度可能对此很有效。将此附加到您的文本元素:
.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)
;
使用这些想法,您可以默认隐藏文本,并使其也只在悬停在饼图上时出现,但我会把它留给您。
关于javascript - 选择特定元素并更改其中一个元素的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35555260/