6

私はSVGとd3.jsに少し慣れていません。

D3 フォース レイアウトでグラフを描画している間、単純な対角線ジェネレーターを使用し、マーカーエンドを使用して矢印の頭を描画しています。

対角線ジェネレーターの代わりにアークを使用すると、矢印の頭がうまく表示されます。ただし、以下のコードのように対角線ジェネレーターを使用すると、適切なマーカーが生成されません。

var vis = this.vis = d3.select(el).append("svg:svg")
    .attr("width", w)
    .attr("height", h);

var force = d3.layout.force()
    .gravity(0.03)
    .distance(120)
    .charge(-800)
    .size([w, h]);

var linkDiag = d3.svg.diagonal()
    .projection(function(d)
    {
        return [d.x, d.y];
    });

vis.append("svg:defs")
        .selectAll("marker")
    .data(["normal", "special", "resolved"])
   .enter()
        .append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
    .append("svg:path")
    .attr("d", "M 0,-5 L 10,0 L0,5");

...そしてまた:

    force.on("tick", function() {
        link.attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; })
        .attr("d", linkDiag)
        .attr("marker-end", function(d) { return "url(#special)"; });

    });

マーカーは頂点に対してまったく向きが合っていません。

どんな助けでも大歓迎です！

4

2 に答える 2

3

refXと を介して矢印を新しい位置に移動しているため、矢印が正しい方向を指していないようにしか見えませんrefY。

たとえば、さまざまな方向に対角線を描画するこのコードを確認してください。180 度の矢印を除いて、矢印は正しく表示されますが、これはおそらく丸め誤差によるものです。

ここで、10 行目の値をたとえば 5 に変更refXしてみてください。今度は、水平に近い矢印が正しく表示されません。これをより劇的に確認するには、値を 8 に変更してみてください。

何が起こっているのかというと、対角線の一部を隠しているため、実際の終点とはわずかに異なる曲線である、より前の点で線が終わっているように見えます。矢印が大きすぎて曲線の一部にかぶさると、同じことが起こります。対称ベジェ曲線である d3 の対角線の場合、矢印は常に完全に水平または垂直を指しているように見えることに注意してください。矢印の不透明度を下げると、何が起こっているかを正確に確認できます。

于 2013-08-14T05:39:27.827 に答える
0

質問をもう少し具体的にしていただけますか？ただし、コードを実行しても問題があると思います

.attr("orient", "auto")

pos を指定してみる

于 2012-06-04T12:51:38.340 に答える