svg にさまざまなパスを追加するユーザー イベントがいくつかあります。私が望むのは、後続の各パスが前のパスの下に描画されることです (+ いくつかのパディング)。これはstyle.topまたはによって行われると思い.attr('y', my_value)ます。しかし、どちらも私にとってはうまくいきませんでした。そして、これに対処するために何もしなければ、パスは互いに重なり合って描画されます。これは悪いことです。簡単なはずですが、さらに明確にするために、重要なコードを提供しましょう。
graphGroup.append("path")
.datum(data)
.attr("fill", "none")
.attr("d", line);
プログラムで n 個のgs を作成できると思います(つまり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);
明らかに、私のダイナミックなアプローチを機能させる方法がわかりません。あなたはそれが思われる場合は可能性が動作し、あなたはそれを構築する、または別の方法を支持して、それをスクラップして自由に感じることができます。
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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加