javascript - 散点图的错误

Question

我实现了下一个example来自 dc.js 并发现了有趣的错误。当颜色重复并且用户在某些具有重复颜色的标签上执行鼠标悬停操作时 - 图表按当前颜色显示所有数据，而不是仅按当前标签显示。

图表:

带有标签鼠标悬停的错误:

我添加了一些fiddle有了这个错误。我该如何解决这个问题？

Answer 1

是的，这看起来像一个错误，对 dc.js 代码的深入研究证实了这个问题。绘制图例项时，会附加一些事件回调。其中重要的是已完成的操作 on "mouseover" event :

.on('mouseover', function (d) {
  _parent.legendHighlight(d);
})

然后，查看 scatter.js 代码 let me confirm the bug :

_chart.legendHighlight = function (d) {
    resizeSymbolsWhere(function (symbol) {
        return symbol.attr('fill') === d.color;
    }, _highlightedSize);
    _chart.chartBodyG().selectAll('.chart-body path.symbol').filter(function () {
        return d3.select(this).attr('fill') !== d.color;
    }).classed('fadeout', true);
};

我们可以看到，突出显示是通过检查该项目的颜色是否与突出显示的图例项目的颜色相同来进行的。因此，就您而言，当颜色重复时，您会突出显示太多点。

所以，您可以注册一个问题 in the dc.js github因为这绝对是一个错误。

在这种情况下不可能进行简单的修复，为了正确突出显示好项目，我们错过了项目的识别，今天，在生成的 html 中，没有任何东西可以识别或链接图例和图，需要添加一些东西链接它们(在这里编写比在现有代码中编写更容易;))。