Question

我发现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)');

为避免文字以及矩形重叠，我根据此处的帖子更改了第292行How to select multiple selectors with selectAll?

  .select("text")

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

到

  .selectAll(".tooltipRect, text")

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

Here's a fiddle of the problem.

但是，工具提示仍然重叠。任何人都可以帮助找出问题的原因是什么？提前谢谢！

Answer 1

因为你选择它们的方式，所以rects可能会重叠为什么不关闭文本中的选择（保持上面的文本选择），但是为rect做一个新的选择：

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

这对我有用。我根据你最初的rect设置做了翻译。我将第286行的偏移量从15调整到20 - 看起来好一点。

重叠toolitp d3.js的问题

1 个答案: