3

問題があり、あなたの助けが本当に必要です。カーソルとともに移動する垂直バーを持つリアルタイム グラフがあり、カーソルが指すときにグラフの値 (d.time と d.value) を表示したい。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);

何をすべきか考えていますか？追加する必要があると思います

svg.selectAll("path1")
.attr("opacity", 1)

 or svg.selectAll("datas1")
.attr("opacity", 1)

どこか！しかしどうしたら良いかわからない..

ありがとうございました、

4

1 に答える 1

1

マウスオーバー機能を次のように更新します。

function mousemove(d) {

 div
 .text( d[0].time+ ", " + d[0].value)
 .style("left", (d3.event.pageX ) + "px")
 .style("top", (d3.event.pageY ) + "px");
}

オブジェクト 'd' へのインデックスを含めます。

それが役立つことを願っています。

于 2013-07-22T09:14:24.103 に答える