D3パスのyを変更する

Question

svgに別のパスを追加するユーザイベントがいくつかあります。私が望むのは、後続の各パスを前のパス（+パディング）の下に描画することです。私はこれがstyle.topまたは.attr('y', my_value)によって行われると仮定します。しかしどちらも私のために働いていませんそして、これに対処するために何もしなければ、パスはお互いの上に描かれますが、それは悪いです。まっすぐ進むことが、追加明確にするため必要がある、私は重要なコードを提供しましょう：等々

graphGroup.append("path") 
     .datum(data) 
     .attr("fill", "none") 
     .attr("d", line); 

私はprogramtically g Sのn個の数を作成することができたとし、（すなわちgraphGroup2 = svg.append('g').attr('transform', 'translate(' + my_transformation +')')としたが、私はそこにあるべきだと思います。もっと簡単な方法かもしれないダイナミックY：明らか

//var count = graphGroup....??? 
//count could be a way to count the existing number of paths in the g graphGroup 


    graphGroup.append("path") 
     .datum(data) 
     .attr("fill", "none") 
     .attr('y', count*200) 
     .attr("d", line); 

、私は私の動的なアプローチを動作させる方法がわからないあなたはそれが仕事、あなたはそれを構築する、または廃棄して自由に感じることができることができると思います。別の方法に賛成する。

Answer 1

SVG <path>要素にはy属性がありません。これらのパスの垂直位置を設定するには、translateを使用する必要があります。ただし、追加の< g>要素を作成する必要はありません。すべてのパスを同じグループに入れることができます。ここで

は私がダウンパスを変換するためにループ内count変数を増やしてるデモ、次のとおりです。

ちょうど好奇心のうち

var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", 300) 
 
    .attr("height", 300); 
 

 
var d = "M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"; 
 

 
var count = 0; 
 
(function loop() { 
 
    if (count++ > 5) return; 
 
    setTimeout(function() { 
 
    svg.append("path") 
 
     .attr("stroke", "black") 
 
     .attr("d", d) 
 
     .attr("fill", "none") 
 
     .attr("transform", "translate(0," + count * 20 + ")") 
 
    loop(); 
 
    }, 1000); 
 
})();

<script src="https://d3js.org/d3.v4.min.js"></script>