由于滑块，光标在 D3 中始终是十字准线

Question

我想更改我的光标，当悬停在我的 D3 可视化上时它总是 "crosshair"。我没有任何应该将光标更改为 "crosshair" 的 JS、D3 og CSS 代码。我试过 d3.select("body").style("cursor", "default"); 和 html, body {cursor: "default";}，但似乎没有任何效果。这是一个常见问题吗？

编辑： 我发现这可能是因为我使用了 slider/brush。参见 http://jsfiddle.net/0ukesgaw/。

更新了 jsfiddle。还是不行。

Answer 1

不，这不是 AFAIK 的常见问题。如果您提供代码示例，会更容易提供帮助。通常更好的方法是在 d3 可视化本身上为光标应用 CSS，而不是在 html 或 body 元素上应用 "globally"。

CSS 示例：

svg {
  cursor: default;
}

更新 1：

我使用 Chrome 的开发工具检查了元素（右键单击 > 检查元素）并发现了这个：

<rect class="background" x="0" width="200" height="210" 
  style="visibility: hidden; cursor: crosshair;"></rect>

这意味着 cursor: crosshair 以某种方式应用于此元素。我在你的源代码中的任何地方都看不到它，所以我想它是 d3 添加的东西——所以你在最初的问题中是对的。

对此的快速修复是添加：

svg rect.background {
  cursor: default !important;
}

但是，如果要投入生产，花时间查找生成它的源代码可能是值得的。

更新二：

仔细一看，好像是d3的Brush组件：https://github.com/mbostock/d3/wiki/SVG-Controls#brush

这是来自https://github.com/mbostock/d3/blob/master/src/svg/brush.js:

  background.enter().append("rect")
    .attr("class", "background")
    .style("visibility", "hidden")
    .style("cursor", "crosshair");

看来您需要使用 cursor: default !important 之类的东西：-/

由于滑块，光标在 D3 中始终是十字准线

Cursor is always crosshair in D3 due to slider

javascript

d3.js

cursor