クリップパスがd3jsの軸を尊重しない

Question

レンダリングしているカスタム軸を除いて、ほとんどの要素で動作するクリップがあります。例https://jsfiddle.net/7992sgbe/では、行を移動/パンするとそのことがわかります。青い軸はクリップアートを尊重しません。私は、コード内のクリップの順序を変更しようとしましたが、それは何の効果もないようです。

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()); 

思想と提案以下の通りです。

Answer 1

基本的には、青い線を間違ったコンテナに配置しているため、クリップパスではわからないことがあります。 SVGの代わりにチャートのボディに追加します。

更新フィドル：https://jsfiddle.net/thatOneGuy/7992sgbe/1/

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

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

PS

あなたがループに使用して以下のコードを記述することができ、重複コードの多くを持っているように私はあなたのコードを編集しました。例：私はズーム機能

に1をも編集した

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]); 
} 

：

この

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); 

は次のように書くことができます