Question

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

Answer 1

从您的问题中不清楚这是否适合您，但一种可能性是使用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; });

Answer 2

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

在javascript图表中添加工具提示

2 个答案: