Question

我读过很多关于d3.js和工具提示的内容，可以参考图表上的各个点。

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

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; });

这会为每个数据点添加一个圆元素，并为每个圆圈添加一个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，其中X上为date，Y上为share：

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

d3.js路径上的工具提示

2 个答案: