Question

如果您在Chrome中打开此link并将鼠标悬停在图例上，则可以正常使用。但是，如果您在Firefox中打开相同的链接，则会发生奇怪的事情，折线图无法正确突出显示。在我的个人代码中，我尝试使用代码将高亮显示类显式添加到悬停的行中

for (var i = 0; i < subchartIds.length; i++) {
    if (subchartIds[i] === highlightedId) {
        var el = chartObject.select('g.sub._' + subchartIds[i] + ' .chart-body .stack-list')._groups[0][0].childNodes[0].childNodes[0];
        el.className.animVal += ' highlight';
        el.className.baseVal += ' highlight';
    } else {
        chartObject.select('g.sub._' + subchartIds[i]).style("opacity", function () {
            return 0.2;
        });    
    }        
}

其中subchartIds数组在我的合成图表中具有折线图数量的ID，而HighlightedId包含我要突出显示的折线图的ID，即，鼠标悬停在图例上的折线图。

Answer 1

花了很多时间后，我可以通过以下方法解决该问题：首先删除所有在 path 元素上设置的默认属性，然后自己重新分配所需的属性。

for (var i = 0; i < subchartIds.length; i++) {
    chartObject.select('g.sub._' + subchartIds[i]).style("opacity", function () {
    return 1;
    });
    var localElement = chartObject.select('g.sub._' + subchartIds[i] + ' .chart-body .stack-list')._groups[0][0].childNodes[0].childNodes[0];
    localElement.className.animVal = localElement.className.animVal.replace('highlight','');
    localElement.className.baseVal = localElement.className.baseVal.replace('highlight','');
    localElement.className.animVal = localElement.className.animVal.replace('fadeout','');
    localElement.className.baseVal = localElement.className.baseVal.replace('fadeout','');
}
for (var i = 0; i < subchartIds.length; i++) {
    if (subchartIds[i] === highlightedId) {
        var elementToHighlight = chartObject.select('g.sub._' + subchartIds[i] + ' .chart-body .stack-list')._groups[0][0].childNodes[0].childNodes[0];
        elementToHighlight.className.animVal += ' highlight';
        elementToHighlight.className.baseVal += ' highlight';
        chartObject.select('g.sub._' + subchartIds[i]).style("opacity", function () {
            return 0.9;
        });    
    } else {
        var elementToFade = chartObject.select('g.sub._' + subchartIds[i] + ' .chart-body .stack-list')._groups[0][0].childNodes[0].childNodes[0];
        elementToFade.className.animVal += ' fadeout';
        elementToFade.className.baseVal += ' fadeout';
        chartObject.select('g.sub._' + subchartIds[i]).style("opacity", function () {
            return 0.2;
        });
    }        
}

DC折线图在图例悬停时无法在Firefox中正确突出显示

1 个答案: