2017-08-02 8 views
0

x軸にマウスオーバーすると表示されるテキストを取得しようとしています。このstackoverflow postは、マウスオーバーで呼び出された関数にデータを渡すことができないことを除いて、ほとんどそこに到達します。d3 v4ツールチップがデータを渡す問題

// Add the X Axis 
    svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x)) 
    .selectAll("text") 
    .style("text-anchor", "end") 
    .style("font", "7px times") 
    .attr("dx", "-.8em") 
    .attr("dy", ".15em") 
    .attr("transform", "rotate(-65)") 
    .on("mouseover", function(d) { 
     return tooltip.style("visibility", "visible") 
    }) 
    .on("mouseout", function(d) { 
     return tooltip.style("visibility", "hidden"); 
    }); 

    var tooltip = d3.select("#info") 
    .append("div") 
    .style("position", "absolute") 
    .style("z-index", "10") 
    // .style("visibility", "hidden") 
    .text("a simple tooltip" + d.name); 

d.nameを削除すると機能します。私はツールチップにdを渡すことができません。

多分私は試みたが、多分私は正しく使用していない。データ(データ).enter()を使用する必要があります。

おかげで、

https://d3js.org/d3.v4.min.jsは、私が使用している唯一のライブラリです。

答えて

1

dにアクセスできるマウスオーバーコールバックのテキストを設定できますか?

// Add the X Axis 
svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x)) 
    .selectAll("text") 
    .style("text-anchor", "end") 
    .style("font", "7px times") 
    .attr("dx", "-.8em") 
    .attr("dy", ".15em") 
    .attr("transform", "rotate(-65)") 
    .on("mouseover", function(d) { 
     return tooltip 
      .style("visibility", "visible") 
      .text("a simple tooltip" + d.name); 
    }) 
    .on("mouseout", function(d) { 
     return tooltip.style("visibility", "hidden"); 
    }); 

var tooltip = d3.select("#info") 
    .append("div") 
    .style("position", "absolute") 
    .style("z-index", "10") 
    // .style("visibility", "hidden") 
    // .text("a simple tooltip" + d.name); 
+0

ああ、私は実際にそれを試みたと思った。できます。ありがとう –

+0

私は 'return tooltip ...'を使用していませんでした –

+0

しかし、私はまだ私が関数を通って 'd'を渡すことができない理由を見ません。 –

関連する問題