問題與重疊工具提示d3.js

我發現this is a very helpful example創建工具提示的折線圖。我現在正在關注這個工作在折線圖上。區別在於我的圖表中的工具提示有一個框/背景以包含顯示在工具提示中的值，所以我將append('rect')與attr('fill', 'white')相加。問題與重疊工具提示d3.js

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

爲了避免文本的重疊，以及矩形，我按照這裏How to select multiple selectors with selectAll?

.select("text") 

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

後改變線路292

.selectAll(".tooltipRect, text") 

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

Here's a fiddle of the problem.

然而，工具提示是仍然重疊。任何人都可以幫忙弄清楚問題的原因是什麼？提前致謝！

來源

2016-03-22 user6073145

由於您選擇方式的不同，可能導致重疊。
在文本爲什麼不關閉selectiona（保持文本選擇上面是），但使一個新的選擇爲矩形：

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

這對我的作品。我根據您最初設置的矩形做了翻譯。我將第286行的偏移量從15調整到了20 - 看起來好一點。

來源

2016-03-22 20:13:30 rby

謝謝！但文字現在重疊。我的問題是如何選擇矩形和文本。 – user6073145

它不應該。確保你沒有刪除文本選擇（第292 - 296行）。關閉它並添加我發佈的代碼作爲rects的新選擇。另外，增加你在第286行（即15）使用的位移量，甚至是20或25。 – rby

太棒了！非常感謝！工作小提琴：https://jsfiddle.net/fk6gfwjr/4/ – user6073145

問題與重疊工具提示d3.js

回答

相關問題