Javascript 缩放会导致图形超出打印区域边界

我的图表有问题。当我缩放时，线越过画布区域的边缘和x/y轴。我尝试添加一个clippath，但似乎不起作用。如果我在调试器中检查DOM，我可以看到clippath矩形正好位于它需要的位置

//The canvasGroup is the area between the axis
var clipGroup = canvasGroup.append("clipPath")
                .attr("id", "canvasGroup-clipPath");

var clipRect = clipGroup.append("rect")
                .attr("width", width)
                .attr("height", height);            

//Function that does the zooming
function doZoom() 
{   
    paths.forEach(function(path)
    {               
        path.attr("transform", d3.event.transform);
    });

    gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale)));
    gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));
}   

var zoom = d3.zoom()
            .scaleExtent([1, 5])
            .translateExtent([[0, 0], [width, height]])
            .on("zoom", doZoom);

//Register the event listener             
canvasGroup.call(zoom);     

//now loop over the data sets and plot each one
//For brevity, I'm skipping the loop and only showing the call to create the line
var path = canvasGroup.append("path")
            .attr("clip-path", "url(#canvasGroup-clipPath)")    
            .attr("fill", "steelblue")                  
            .attr("class", "line")
            .attr("id", lineId + "-line")
            .style("stroke", lineColor)
            .style("stroke-width", 1)   
            .style("fill", "none");                     

paths.push(path);
path.attr("d", function(d) { return plotline(i)});

这是它的样子。 缩放前：

---

缩放后：

该问题是由于在表示数据的路径上设置了剪切路径造成的。应用剪裁路径时，浏览器需要决定

元素的内容应使用哪个坐标系。这由默认为

userSpaceOnUse

的属性控制：

userSpaceOnUse
元素的内容表示元素被引用时所在的当前用户坐标系中的值（即，通过属性引用元素的元素的用户坐标系）

在

doZoom（）

函数中变换路径时，实际上是在为路径建立新的坐标系。并且，除了绘制路径本身，该坐标系还将用于计算剪裁路径的位置和尺寸。因此，通过根据缩放行为变换路径，可以将相同的变换应用于剪裁路径，从而将其从所需位置移开

尽管很容易将

clipPathUnits

属性设置为其其他有效值

objectBoundingBox

，但这很可能不是您想要的，因为这会使问题进一步复杂化。设置此值时，需要指定

内容的位置和长度作为边界框

知道了这一切，有一个更容易的解决办法！您只需将

剪辑路径

应用于缩放期间不会变换的元素，例如父组。鉴于您提供的代码不完整，将剪切路径设置为

canvasGroup

，这可能非常有效：

// Set the clipping path on the parent group.
canvasGroup.attr("clip-path", "url(#canvasGroup-clipPath)")    

// Append the path to the group as before.
var path = canvasGroup.append("path")
               .attr("fill", "steelblue")                  
               .attr("class", "line")
               // ...

---

您的

clipPath

是如何创建的？只需

canvasGroup.append（“clipPath”）.attr（“id”，“canvasGroup clipPath”）

。canvasGroup是两个轴之间的区域，包含clipPath和数据路径（图）。请检查我的回答，在下面的行中已经这样做了<代码>var clipRect=clipGroup.append（“rect”）.attr（“width”，width）.attr（“height”，height）您可以创建一个JSFIDLE或代码片段来说明这个问题吗？这会帮助我们帮助你。谢谢你的解释。将“剪辑路径”属性移动到未被转换的组可以修复此问题。