d3.js とツールチップに関して私が読んだことの多くは、グラフ上に個々のポイントを持つことを参照しています。
代わりに、私のグラフ グラフはレンダリングに 1 つの長いパスを使用しています。そのようなパスにマウスオーバー メソッドをどのように適用するのか疑問に思っていました。その後、それに応じてツールチップ div を結び付けます。
http://jsfiddle.net/ericps/xJ3Ke/6/
svg.append("path")
.attr("class", "area")
.attr("clip-path", "url(#clip)")
.style("fill", "url(#gradient)");
ツールチップを表示したい各ポイントを表す非表示オブジェクトのレイヤーを設定し、それらのオブジェクトにマウス操作を追加できます。
私はあなたの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/
以下は、私が使用した単純な 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")
;
};
}
使用法 ( X と Y のcountriesデータ系列があると仮定):dateshare
// 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 以上に設定します)。