Question

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

编辑：我发现这可能是因为我使用了滑块/画笔。请参阅http://jsfiddle.net/0ukesgaw/。

更新了jsfiddle。仍然没有工作。

Answer 1

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

CSS示例：

svg {
  cursor: default;
}

更新1：

我使用Chrome的开发工具检查了元素（右键单击＆gt; Inspect元素）并找到了：

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

这意味着cursor: crosshair以某种方式应用于此元素。我无法在您的源代码中的任何位置看到它，所以我认为这是d3添加的内容 - 所以您在原始问题中是正确的。

这个的快速修补程序是添加：

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

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

更新2：

仔细观察，它似乎来自d3的画笔组件：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中为十字准线

1 个答案: