0

我真的需要帮助！请..我需要在此图中添加工具提示：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);
}
4

2 回答 2

0

你几乎拥有它！这些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/

于 2013-07-04T14:05:05.337 回答
0

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

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; });
于 2013-07-04T11:56:53.813 回答