Javascript: 如何通过将鼠标悬停在轴标签上来显示工具提示

Question

我正在使用平行坐标可视化一些数据。我使用了以下网站的大部分代码：

https://syntagmatic.github.io/parallel-coordinates/examples/table.html

现在，我想将工具提示添加到垂直线的标签中。当用户将鼠标悬停在标签上时，该标签的描述将出现在一个框中。

我想通过 if else 函数手动添加每个标签的描述，因为我没有存储在数据库中的描述。在某种程度上，如果有人将鼠标悬停在 "cylinders"（它是一个轴的标签）上，则与之相关的描述会出现在一个框中。

我在下面的代码中使用了 "mouseover"，但它不起作用：

g.append("svg:g")
  .attr("class", "axis")
  .attr("transform", "translate(0,0)")
  .each(function(d) { d3.select(this).call(axis.scale(yscale[d])); })
.append("svg:text")
  .attr({
    "text-anchor": "middle",
    "y": -10,
    "transform": "translate(0,-5) rotate(" + __.dimensionTitleRotation + ")",
    "x": 0,
    "class": "label"
  })
  .text(function(d) {
    return d in __.dimensionTitles ? __.dimensionTitles[d] : d;  // dimension display names
  })
  .on("dblclick", flipAxisAndUpdatePCP)
  .on("mouseover", function(d){
             if d == "economy" {
                 return popover("some descition about economy");
             }else ifd == ""cylinder" {
                 return popover("some descition about cylinder");
             });

我知道它有一些问题，但不知道如何解决。谁能帮帮我？

Answer 1

您需要为工具提示添加 html div 并根据鼠标的位置进行修改。您可以参考以下块以获取更多信息： http://bl.ocks.org/wdickerson/64535aff478e8a9fd9d9facccfef8929

Javascript: 如何通过将鼠标悬停在轴标签上来显示工具提示

Javascript: How to show tooltip by hovering mouse over axis lable

javascript

d3.js

parallel-coordinates