d3或nvd3 - 将Y轴标题水平或鼠标悬停在刻度线上

Question

是否可以水平显示y轴标题而不是垂直使用d3.js或nvd3.js？或者标签上是否有鼠标悬停事件可以用来水平显示y轴标题的气球？任何一个例子都会有很大的帮助。

Answer 1

轴标题不是标准d3轴的一部分，它们由NVD3添加。但是，与所有组件一样，一旦NVD3创建它们，您可以使用d3来选择和修改它们。

NVD3使用类nv-axislabel创建轴标签。 y轴组作为一个整体被赋予类nv-y nv-axis。因此，绘制图形后，您可以使用

选择y轴标签

d3.select("g.nv-y.nv-axis").select("text.nv-axislabel")

选择后，您可以根据需要更改其位置。不幸的是，它并不像移除旋转那么简单，因为它会抛弃位置的其余部分 - 在旋转后应用来应用x和y位置，因此移除旋转并将文本关闭屏幕。

以下代码将标签定位在轴顶部正上方：

d3.select("g.nv-y.nv-axis").select("text.nv-axislabel")
    .attr({"transform":null, x:0, y:"-1em"})
    .style("text-anchor","end");

对于您的另一个想法 - 绘制一个水平工具提示 - 您可以利用浏览器的默认工具提示来处理包含SVG <title>元素的任何元素。然而，一个复杂因素是NVD3关闭了轴元素上的鼠标事件，所以你必须重新打开它们：

  var yLabel = d3.select("g.nv-y.nv-axis").select("text.nv-axislabel")
      .style("pointer-events", "all");

  yLabel
    .append("title")
    .text( yLabel.text() );

同样，无论您选择哪个选项，都必须在绘制图形后执行此操作。您还必须在每次更新后重新进行更改，因此您应该将它们分组到一个函数中以使其更容易。