d3.js tooltips на пути

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

Usage (если у вас есть 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 или более).