棒グラフにトランジションを追加する作業をしていました。トランジションは軸から始まり、目的の高さまで上昇します。トランジションは機能しましたが、マウスオーバーイベントが機能しなくなりました。dすでにデータをplwdhBarオブジェクトに追加していて、コードの後半でそれを呼び出しているのに、なぜが未定義なのか混乱しています。
同様の解決策を検討したところ、解決策は棒グラフの棒を1回呼び出してデータから設定し、次に遷移を追加してから、マウスオーバーイベントを追加することであるように見えました。
これが私が現在持っているものです:(トランジションはshowTooltip(d)機能しているがマウスオーバーは機能していない、関数のエラーが発生する）
var plwdhBar = svg.append("g")
d3.csv("Data/"+name+".csv").then(function(dataset) {
plwdhBar.selectAll("plwdhBar") //bar2
.data(dataset)
.enter()
.append("rect")
.attr("class","plwdhBar")
.attr("width", 30)
.attr("fill", bar2Color)
.attr("x",(d)=>xScale(d.year)+(barW/2)-15)
.attr("y", h-margin.bottom)
.transition()
.duration(200)
.attr("y",(d)=>yBarScale(d.plwdh))
.attr("height", (d)=>(h-yBarScale(d.plwdh)) -margin.bottom)
plwdhBar.on("mouseover",function(d){
showTooltip(d);
}).on("mouseout",function(){
removeTooltip();
});
}
また、トランジションのコード行を取り出して作成してみました。
plwdhBar.transition()
.duration(200)
.attr("y",(d)=>yBarScale(d.plwdh))
.attr("height", (d)=>(h-yBarScale(d.plwdh)) -margin.bottom)
ただし、それでも未定義のエラーが発生しました d
すべての状況でのエラーはTypeError: d is undefined、removeToolTip(d)関数が呼び出されたときに最初のコードスニペットで発生し、2番目のコードスニペットが実装されているシナリオでは、エラーが.attr("y",(d)=>yBarScale(d.plwdh))行で発生します。
これはあなたのplwdhBar変数です：
var plwdhBar = svg.append("g");
これだけで、それ以上はありません。それにバインドされたデータはありません。この情報はここで何が悪いのかを理解するために重要なので、これを覚えておいてください。
次に、次のことを行います。
plwdhBar.selectAll("plwdhBar")
.data(dataset)
.enter()
.append("rect")
//etc...
もちろん、これは長方形を追加することであり、そのチェーンにリスナーを追加すると機能します。しかし、これは何であるかを変えないという事実に注意してくださいplwdhBar、それvar plwdhBar = svg.append("g");は最初に示したように、そのままであり続けます。
したがって、後で行うとき...
plwdhBar.on("mouseover",function(d){
showTooltip(d);
})
...もちろん、ここにはデータがないため、エラーが発生します。
解決策：選択に名前を付けてください！
例えば：
var foo = plwdhBar.selectAll("plwdhBar")
.data(dataset)
.enter()
.append("rect")
//etc...
今、あなたはすることができます：
foo.on("mouseover",function(d){
showTooltip(d);
})
ただし、重要なアドバイスがあります。遷移には、という名前のメソッドもありonます。したがって、メインチェーンからトランジションを削除します。そうしないと、別のエラーが発生します（これとは関係ありません）。トランジションは個別に追加できます。
foo.transition()
//etc...
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加