問題があり、あなたの助けが本当に必要です。カーソルと共に移動する垂直バーを持つリアルタイム グラフがあり、カーソルが指すときにグラフの値 (d.time と d.value) を表示したい。私はここからツールチップのインスピレーションを得ようとしています: http://bl.ocks.org/WillTurman/4631136そしてそれは私が作ったものです: http://jsfiddle.net/QBDGB/54/私は2つのシリーズを持っていますランダムに生成されたデータ (data1s および data2s) であり、ご覧のとおり、データが生成された時間を「時間」変数に入れました。
now = new Date(Date.now() - duration);
var data1 = initialise();
var data2 = initialise();
//Make stacked data
var data1s = data1;
var data2s = [];
for(var i = 0; i < data1s.length; i++){
data2s.push({
value: data1s[i].value + data2[i].value,
time: data2[i].time
}
)};
function initialise() {
var arr = [];
for (var i = 0; i < n; i++) {
var obj = {
time: Date.now(),
value: Math.floor(Math.random() * 100)
};
arr.push(obj);
}
return arr;
}
グラフにカーソルを合わせると、ツールチップに時間と値を表示したいのですが、データセット (data1s と data2s) を渡す方法がわからないため、ツールチップはそれを認識せず、「未定義」と表示されます。 show! これは、ツールチップ関数がどのように作成され、「path1」と「path2」から呼び出されるかです。
function mouseover() {
div.transition()
.duration(500)
.style("opacity", 1);
}
function mousemove(d) {
div
.text( d.time+ ", " + d.value)
.style("left", (d3.event.pageX ) + "px")
.style("top", (d3.event.pageY ) + "px");
}
function mouseout() {
div.transition()
.duration(500)
.style("opacity", 1e-6);
}
var path1 = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.data([data1s])
.attr("class", "line1")
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);
var path2 =svg.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.data([data2s])
.attr("class", "line2")
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);
何をすべきか考えていますか?http://bl.ocks.org/WillTurman/4631136でわかるように、レイヤーは
svg.selectAll(".layer")
.attr("opacity", 1)
.on("mouseover", function(d, i) {
svg.selectAll(".layer").transition()
.duration(250)
.attr("opacity", function(d, j) {
return j != i ? 0.6 : 1;
})})
.on("mousemove", function(d, i) {
mousex = d3.mouse(this);
mousex = mousex[0];
var invertedx = x.invert(mousex);
invertedx = invertedx.getMonth() + invertedx.getDate();
var selected = (d.values);
for (var k = 0; k < selected.length; k++) {
datearray[k] = selected[k].date
datearray[k] = datearray[k].getMonth() + datearray[k].getDate();
}
「mousemove」機能は各レイヤーに追加できますが、これを各パスに追加するにはどうすればよいですか?
ありがとうございました、