1

line 要素の最後に表示するマーカーを作成しました。しかし、私の問題は、マーカータグが動的に生成されると、行末に表示されないことです。

私がすることは、最初に svg を html 本文に追加することです。

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

次に、svg にマーカーを追加します。

$('svg').append('<defs><marker id="arrow" viewbox="0 -5 10 10" refX="18" refY="0"markerWidth="6" markerHeight="6" orient="auto"><path d="M0,-5L10,0L0,5Z"></marker> </defs>');

次に、svg マーカー要素を指す属性 marker-end を使用して、svg に行を追加します。

svg.append("g").selectAll("line.link")
        .data(force.links())
        .enter().append("line")
        .attr("class", "link")
        .attr("marker-end", "url(#arrow)");

行末にマーカーは表示されません。jsfiddle http://jsfiddle.net/2NJ25/2/のそのコードのリンクは次のとおりです。

しかし、jquery を使用して動的追加を削除し、以下のコードのように html 内でマーカー タグを定義すると、http://jsfiddle.net/AqK4L/4/というリンクが機能します。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Cloud</title>
        <script type="text/javascript" src="d3.v2.js"></script>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    </head>
    <body>
        <svg id="cloud" width="800" height="600">
            <defs>
                <marker id="arrow" viewbox="0 -5 10 10" refX="18" refY="0"
                        markerWidth="6" markerHeight="6" orient="auto">
                    <path d="M0,-5L10,0L0,5Z">
                </marker>
           </defs>
        </svg>
        <link href="cloud.css" rel="stylesheet" type="text/css" />
        <script src="cloud.js" type="text/javascript"></script>
    </body>
</html>

マーカータグを動的に生成したときの問題は何ですか。マーカーが表示されないのはなぜですか? マーカータグを動的に生成したい。これを行う方法？

4

2 に答える 2

3

問題は、jquery を使用して SVG 要素をテキストとして追加すると、間違った名前空間で解釈されることです。つまり、HTML には 、 などの要素がdefsないmarkerため、これらの要素は何もしません。これらの要素は、動的に追加するときに指定しない SVG 名前空間でのみ有効です。それらが静的に指定されている場合、名前空間はコンテキストから明らかです。

これを修正するにはいくつかの方法があります。正しい名前空間でノードを明示的に作成し、適切な場所に追加できます。ただし、より簡単な解決策は、D3 を使用してこれらの要素を追加することです。これにより、名前空間の問題が処理されます。コードはもう少し冗長になりますが、簡単です。

svg.append("defs").append("marker")
    .attr("id", "arrow")
    .attr("viewbox", "0 -5 10 10")
    .attr("refX", 18)
    .attr("refY", 0)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M0,-5L10,0L0,5");

ここでjsfiddleを更新しました。

于 2013-09-05T11:38:30.773 に答える
0

いくつかのコードが追加されました。私のアップデートをチェックしてください

1)

var texts = svg.selectAll(".label")
        .data(force.nodes())                    
        .enter()            
        .append("text")
            .attr("class", "label")
            .attr("fill", "black")
            .text(function(d) {  return d.name;  })
        .call(force.drag);

2)

    texts.attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
    });

CSS

.node, .label {
    cursor:pointer;
}
于 2013-09-05T12:56:12.980 に答える