D3.js的工具提示

你可以设置一个不可见的对象层，代表你想要有工具提示的每个点，并为这些对象添加鼠标交互。

我已经更新了你的jsfiddle与以下-

svg.selectAll("circle")
    .data(data)
  .enter().append("circle")
    .attr("r", 5)
    .style("fill","none")
    .style("stroke","none")
    .style("pointer-events","all")
  .append("title")
    .text(function(d) { return "Date: " + formatDate2(d.date) + " Value: " + d.value; });

这将为每个数据点添加一个圆圈元素，并为每个圆圈添加一个title元素。注意，"pointer-events","all"允许鼠标交互，即使元素是不可见的

full jsfile在这里:http://jsfiddle.net/xJ3Ke/9/

下面是我使用的一个简单的工具提示类:

/**
 * Tooltip helper.
 *
 * Copyright © 2014 Maciej Nux Jaros.
 * License: CC-BY or MIT.
 */
function Tooltip() {
    var _tooltip = this;
    var _container = null;
    /**
     * Tootltip class name (use if you want more then one tooltip).
     * @type String
     */
    this.className = 'tooltip';
    /**
     * Width of the rect.
     * @type String
     */
    this.width = "100";
    /**
     * Height of the rect.
     * @type String
     */
    this.height = "20";
    /**
     * Tootltip source attribute.
     * @type String
     */
    this.textSourceAttrName = 'data-title';
    /**
     * Style of background rectangle.
     * @type String
     */
    this.rectStyle = "opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffcc00;stroke-width:3;";
    /**
     * Init tooltip elements and append to container.
     * 
     * @param {D3} container D3 container element - e.g. main group (chart container).
     */
    this.init = function(container) {
        _container = container;
        container.append("g")
            .attr("class", _tooltip.className)
            .attr("style", "display:none")
            .append("rect")
                .attr("style", _tooltip.rectStyle)
                .attr("width", _tooltip.width)
                .attr("height", _tooltip.height)
                .attr("rx", "10")
                .attr("ry", "10")
        ;
        container.selectAll("." + _tooltip.className)
            .append("text")
                .attr("x", 5)
                .attr("y", 10)
                .attr("dy", ".35em")
        ;
    };
    /**
     * Show tooltip (title) for given point
     *
     * run e.g. onmouseover
     *
     * @param {Element} point Circle element.
     */
    this.show = function(point) {
        var text = point.getAttribute(_tooltip.textSourceAttrName);
        var x = parseFloat(point.getAttribute('cx')) + 10;
        var y = parseFloat(point.getAttribute('cy')) + 5;
        _container
            .selectAll("." + _tooltip.className)
            .attr("style", "")
            .attr("transform", function() { return "translate(" + x + "," + y + ")"; })
        ;
        _container
            .selectAll("." + _tooltip.className + " text")
            .text(function() { return text; })
        ;
    };
    /**
     * Hide tooltip.
     *
     * run e.g. onmouseout
     */
    this.hide = function() {
        _container
            .selectAll("." + _tooltip.className)
            .attr("style", "display:none")
        ;
    };
}

用法(假设您有countries数据系列，date在X上，share在Y上):

// points
for (var i=0; i<countries.length; i++) {
    var points = svg.selectAll(".points" + i)
        .data(countries[i].values)
        .enter()
        .append("g")
            .attr("class", ".points" + i)
    ;
    // visible points
    points
        .append("circle")
            .attr("class", "point")
            .attr("stroke", "none")
            .attr("fill", "black")
            .attr("cx", function(d, i) { return x(d.date) })
            .attr("cy", function(d, i) { return y(d.share) })
            .attr("r", function(d, i) { return 2 })
    ;
    // bigger (almost) invisible points for tooltip
    points
        .append("circle")
            .attr("class", "blank-point")
            .attr("style", "opacity:0.05;fill-opacity:1;")
            .style("fill", function(d) { return color(countries[i].name); })
            .attr("cx", function(d, i) { return x(d.date) })
            .attr("cy", function(d, i) { return y(d.share) })
            .attr("r", function(d, i) { return 6 })
            .attr("data-title", function(d, i) { return formatDate(d.date) +'; '+ d.share })
            .attr("onmouseover", "tooltip.show(this)")
            .attr("onmouseout", "tooltip.hide()")
    ;
}
// prepare tooltip
tooltip.init(svg);

注意，请确保在图表上的其他内容之后准备工具提示，否则它将不可见。还要确保在图表的右侧有足够的空间(例如，将图表的右距设置为100或更多)。