0

問題があり、あなたの助けが本当に必要です。データと時間がランダムに生成されるリアルタイム グラフがあり、グラフが移動したときにパス上のそのポイントの時間と値を表示するツールチップを作成したいと考えています。それは私が持っているものですが、ツールチップがグラフに表示されません! http://jsfiddle.net/QBDGB/59/これは、ツールチップを表示するために、roder の「path1」に追加したものです。 

   //tooltip

 var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);

  var tooltip = d3.select("body").append("div")   
.attr("class", "tooltip")               
.style("opacity", 0);

  var blueCircles = svg.selectAll("path1")
    .data(data1s)
       .on("mouseover", function(d ,i) {
         tooltip.transition()
         .duration(650)
         .style("opacity", .9);
         tooltip.html(formatTime(new Date(d.time)) + "<br/>" + d.value)
         .style("left", (d3.event.pageX) + "px")
       .style("top", (d3.event.pageY - 28) + "px");
        })
       .on("mouseout", function(d ,i ) {
            div.transition()
                .duration(650)
                .style("opacity", 0);
        });

ツールチップを使用したリアルタイムの JavaScript グラフのアイデアや同様の例はありますか?

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

4

1 に答える 1

0

ツールチップが表示されるようになりました。http://jsfiddle.net/QBDGB/67/

変更した内容とその理由は次のとおりです。

var blueCircles = svg.selectAll(".line1")
    //.data(data1s)

セレクターとして「path1」を渡していました。「path1」は、クラスの名前ではなく、変数の名前です。クラス、ID、またはタグ名を選択する必要があります。変数名ではありません。タグ名 ("a"、"body"、"head" など) の前に文字がないセレクターが選択されていますが、前に "." があります。クラスのために選択します。これは、あなたがやろうとしていたように見えるものです。

ここにデータが既に含まれているため、「.data」呼び出しを削除しました。

var path1 = svg.append("g")
    .attr("clip-path", "url(#clip)")
    .append("path")
    .data([data1s])
    .attr("class", "line1");

詳細については、選択に関する d3 API を参照してください https://github.com/mbostock/d3/wiki/Selections

于 2013-07-22T13:51:27.317 に答える