Javascript 剪辑路径不符合d3js中的轴

我有一个clippath，它可以处理我的大多数元素，除了我正在渲染的自定义轴。在本例中，您可以在移动/平移直线时看到这一点。蓝色轴不尊重clipath。我试图在代码中重新定位剪辑的顺序，但似乎没有任何效果

var clip = svg.append("svg:clipPath")
    .attr("id", "clip")
    .append("svg:rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", width)
    .attr("height", height);

var chartBody = svg.append("g")
    .attr("clip-path", "url(#clip)");

轴的代码如下所示

var make_x_marker = function (scale=1, transform=[0,0]) {

    console.log(transform)
    var markers =[];
    var markerLabels={};
    for (i=0; i<raw['ecg-markers'].length; i++)
    {

    var value=(1000/244.140625)*raw['ecg-markers'][i];
    value=x(raw.meta.startts+value) 
     markers.push(value)
     markerLabels[value]="A"+Math.floor(Math.random()*26);
    }

    return d3.svg.axis()
        .orient("top")
        .tickValues(markers)
        .tickSize(height-15)
        .tickFormat(function(d){return markerLabels[d]})


};

svg.append("g")
    .attr("class", "x marker")
    .attr("transform", "translate(0," + height + ")")
    .call(make_x_marker());

var make\u x\u marker=function（比例=1，变换=0,0]）{
console.log（转换）
var标记=[]；
var-markerLabels={}；
对于（i=0；i基本上，您将蓝线放在了错误的容器中，因此剪辑路径不知道它们。请附加到图表体而不是SVG

更新小提琴：

PS

我已经编辑了您的代码，因为您有很多重复代码，可以使用for循环编写较少的代码。例如：

这个

可以这样写：

var linesArray = [line0, line1, line2, line3, line4, line5]

for (var i = 0; i < linesArray.length; i++) {
  chartBody.append("svg:path")
    .datum(data)
    .attr("class", "line" + i)
    .attr("d", linesArray[i]);
}

var linesArray=[line0，line1，line2，line3，line4，line5]
对于（变量i=0；i

我还编辑了缩放功能中的一个

svg.select(".line0")
    .attr("class", "line0")
    .attr("d", line0);

  svg.select(".line1")
    .attr("class", "line1")
    .attr("d", line1);

  svg.select(".line2")
    .attr("class", "line2")
    .attr("d", line2);

  svg.select(".line3")
    .attr("class", "line3")
    .attr("d", line3);

  svg.select(".line4")
    .attr("class", "line4")
    .attr("d", line4);

  svg.select(".line5")
    .attr("class", "line5")
    .attr("d", line5);

var linesArray = [line0, line1, line2, line3, line4, line5]

for (var i = 0; i < linesArray.length; i++) {
  chartBody.append("svg:path")
    .datum(data)
    .attr("class", "line" + i)
    .attr("d", linesArray[i]);
}