路径上的d3.js工具提示

Question

我所阅读的有关d3.js和工具提示的很多内容都涉及到在图形上具有单独的点。

相反，我的图图使用一条长路径进行渲染。 我想知道如何将鼠标悬停方法应用于这样的路径，然后在其中相应地绑定一个工具提示div

http://jsfiddle.net/ericps/xJ3Ke/6/

svg.append("path")
.attr("class", "area")
.attr("clip-path", "url(#clip)")
.style("fill", "url(#gradient)");

Answer 1

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

我用以下更新了您的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; });

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

完整的jsfiddle在这里： http ： //jsfiddle.net/xJ3Ke/9/

Answer 2

下面是我使用的一个简单的Tooltip类。

/**
 * 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或更大）。