toolitpと重複する問題d3.js

Question

this is a very helpful example私はthis is a very helpful exampleを見つけました。折れ線グラフにツールチップを作成しました。私は今これを折れ線グラフで作業しています。違いは、私のチャートのツールチップには、ツールチップに表示されている値を含むボックス/背景があるので、append('rect')にattr('fill', 'white')を追加します。

mousePerLine.append('rect'). 
    attr('width', '38px'). 
    attr('height', '20px'). 
    attr('class', 'tooltipRect'). 
    style('fill', 'white'). 
    attr('transform', 'translate(5,-13)'); 

がRECTだけでなく、テキスト の重複を避けるために、私はしかし

.selectAll(".tooltipRect, text") 

    .attr("transform", function(d,i) { 
     return "translate (10,"+(3+ypos[i].off)+")"; 
    }) 

Here's a fiddle of the problem.

にここHow to select multiple selectors with selectAll?

.select("text") 

    .attr("transform", function(d,i) { 
     return "translate (10,"+(3+ypos[i].off)+")"; 
    }) 

ポストに応じてライン292を変更しました、ツールチップはまだ重複している。問題の原因は何ですか？前もって感謝します！

Answer 1

あなたがそれらを選択しているので、矩形は重複している可能性があります。
なぜテキストでselectionaを閉じない（あるとして上にテキスト選択を保つ）が、RECTのための新しい選択を行います。

d3.selectAll(".mouse-per-line") 
    .select("rect") 
    .attr("transform", function(d,i) { 
     return "translate (5,"+(ypos[i].off - 13)+")"; 
    }); 

これは私のために動作します。 私はrectの最初の設定に基づいて翻訳を行いました。 286行目のオフセットを15から20に調整しました。