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

這增加了一個圓形元素，每個數據點，和標題元素的每一個圓圈。需要注意的是"pointer-events","all"允許鼠標交互，即使元素是不可見的

充分的jsfiddle這裏： http://jsfiddle.net/xJ3Ke/9/

Answer 2

下面是我用一個簡單的工具提示類。

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