在javascript图形中添加工具提示

Adding tooltip in javascript graph

本文关键字：添加 工具提示 图形 javascript      更新时间：2023-09-26

我真的需要帮助！请我需要为此图添加工具提示：http://jsfiddle.net/dvqFj/1/知道我该怎么做吗？或者你知道D3.js中有类似的例子吗我尝试了以下操作，但没有成功：

div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 12px;
  padding: 8px;
  font: 10px sans-serif;
  background: #ddd;
  border: solid 1px #aaa;
  border-radius: 8px;
  pointer-events: none;
}

     var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 1e-6)
function mouseover() {
  div.transition()
      .duration(500)
      .style("opacity", 1);
}
function mousemove() {
  div
      .text(d3.event.pageX + ", " + d3.event.pageY)
      .style("left", (d3.event.pageX - 34) + "px")
      .style("top", (d3.event.pageY - 12) + "px");
}
function mouseout() {
  div.transition()
      .duration(500)
      .style("opacity", 1e-6);
}

从您的问题中还不清楚这是否适合您，但一种可能性是使用title元素，而不是实现自己的工具提示。这具有标准化和简单化的优点，但代价是减少了可能的定制。

http://jsfiddle.net/ezUex/

browser.append("path")
    .attr("class", "area")
    .attr("d", function (d) {
        return area(d.values);
    })
    .style("fill", function (d) {
        return color(d.name);
    })
    .append("title").text(function(d){ return d.name; });

你几乎成功了！mouseover函数只需要附加到您的路径元素：

browser.append("path")
    .attr("class", "area")
    .attr("d", function (d) { return area(d.values); })
    .style("fill", function (d) { return color(d.name); })
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseout",  mouseout);

http://jsfiddle.net/dvqFj/5/

相关文章：