データセットの切り替え後にツールチップにデータを追加する方法

Question

グラフに2つのデータセットがあり、段落をクリックしてデータを切り替える（後でボタンを描画しています）。データセットの次元が異なるため、選択したデータセットに応じてツールチップ内のデータセットを置き換えます。ツールチップを一度調整することができます

.on("mouseover", function(d, i) { 
    var tickDate = d3.select(d3.selectAll(".axis .tick text")[0][i]).data()[0]; 
    console.log (tickDate); 
    var formatDate = RU.timeFormat("%B %Y"); 
    var tooltipDate = formatDate(tickDate); 
    //Get this bar's x/y values, then augment for the tooltip 
    var xPosition = parseFloat(d3. select(this). attr("x")) + ((barWidth - barPadding)/2); 
    var yPosition = parseFloat(d3. select(this). attr("y"))/2 + h/2; 
    //Update the tooltip position and value 
    d3.select("#tooltip") 
     .style("left" , xPosition + "px") 
     .style("top" , yPosition + "px") 
     .select("#value") 
     .text(d + " DIMENSION1"); 
    d3.select("#tooltip") 
     .select("#label") 
     .text(tooltipDate); 
    //Show the tooltip 
    d3.select("#tooltip"). 
     classed("hidden" , false); 
    d3.select(this) 
     .attr("fill", "orange"); 
    }) 

私は切り替え後に更新することはできません。両方の場合に「DIMENSION1」というテキストがあります。私の目的は、切り替え後のテキスト「DIMENSION2」の外観で、初期データセットの選択後に「DIMENSION1」を返します。ここで

は私のバイオリンです：ここhttps://jsfiddle.net/anton9ov/dw1xp1ux/

Answer 1

いくつかの問題：

• 遷移

• のために呼び出される関数transition(dataset, dimension)を作成することによって避けコードの重複あなたはmouseoverイベントを更新しませんデータセットを変更したときですから、データ

 
    svg.selectAll("rect").on("mouseover", function(d, i) { 
      // Your mouseover function 
     });

https://jsfiddle.net/bfz97hdw/は （私も、固定色の問題）このフィドルを参照してください

を更新するたびにマウスオーバー機能を呼び出します