Question

我花了一整天时间试图弄清楚我的代码发生了什么，并且不是很远。

如果您在Firefox中查看以下链接，则一切都符合预期;

Firefox中的行为是将鼠标悬停在黄点上会突出显示日期标题下方列表中的时间。

然而，在Chrome中，某些东西似乎非常破碎。我永远不会得到最后一个要强调的内容，而其他时间的突出显示感觉并不正确 - 有时会遗留任何文物，有时会突出显示两次。

我是否因使用foreignObject而遇到麻烦？我应该以某种方式使用svg将时间画到屏幕上吗？

代码的mouseOver部分如下，但是查看jsfiddle是了解正在发生的事情的唯一真实方法。

      .on("mouseover", function(d){
                    d3.select(this).style('fill', 'black');
                    $('.highlighted').removeClass('highlighted');
                    var id = 'readinglog' + new Date(d).getTime();
                    $(document.getElementById(id)).addClass('highlighted');
                })
                .on("mouseout", function(d){
                    d3.select(this).style('fill', 'orange');
                    var id = 'readinglog' + new Date(d).getTime();
                    $(document.getElementById(id)).removeClass('highlighted');
                })

Answer 1

问题是Chrome在其样式发生变化后不会重新绘制该元素。因此正确分配了类，显示只是没有更新。您可以阅读有关此问题的更多信息here。我已根据其中概述的内容实施了一个解决方案，隐藏并显示foreignObject元素：

$('.readinglogpreviewvalues').hide();
$('.readinglogpreviewvalues').get(0).offsetHeight;
$('.readinglogpreviewvalues').show();

完整示例here。在Chrome中我可以正常使用。

Chrome与d3的foreignObject错误？

1 个答案: