Question

我的图表的工具提示在悬停时有十字线。这些十字线是简单的两条线（一条垂直，一条水平）。

目标：限制这些行的长度，使它们包含在图表区域内（灰色＆＃39;网格图＆＃39;请参阅下面相关代码段的第220行。

正如您所看到的，它们跨越了整个宽度和宽度。 svg区域的高度，尽管我尽最大努力通过添加剪辑路径将它们修剪到网格绘图区域。代码段：

/*
causes truncated lines on half viewport 

   focus.append("defs").append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width)
        .attr("height", height);
*/

    // horizontal crosshair 
    focus.append("line")
          .attr({
            "x1": -width,
            "y1": 0,
            "x2": width,
            "y2": 0,
            "clip-path": "url(#clip)"
          });

    // vertical crosshair    
    focus.append("line")
            .attr({
              "x1": 0,
              "y1": -height,
              "x2": 0,
              "y2": height, 
              "clip-path": "url(#clip)"
            });

如果您取消注释＆＃34; defs＆＃34;片段你会看到奇怪的行为。谢谢你的帮助。

Answer 1

我发现显式设置十字线的长度比使用剪辑路径更容易：

focus.select(".h").attr(
  {"x1": margin.left - d3.mouse(this)[0],
   "x2": width - margin.right - d3.mouse(this)[0]});
focus.select(".v").attr(
  {"y1": margin.top - d3.mouse(this)[1],
   "y2": height - margin.bottom - d3.mouse(this)[1]});

这要求您为每一行分配一个类，以便区分它们。完整示例here。

d3js图表：如何使用clip-path将行的长度限制为特定的边界框

1 个答案: