0

d3 視覚化ライブラリのinsert() 関数の使用に問題があります。「セレクターの前」の使い方がわかりません。こことここの例を赤くしましたが、これは役に立ちませんでした。

svg 要素を作成し、それに要素を追加します。次に、foreignObject-element をグループに追加し、その後、foreignObject-element の前に四角形を挿入したいと考えています。

これが私のコードです

var body = d3.select("body");

var svg = body.append("svg")
    .attr("width", '100%')
    .attr("height", '100%');

var group = svg.append("svg:g");

var html = group.append("foreignObject")
    .attr("x", 50)
    .attr("y", 25)
    .attr("width", 200)
    .attr("height", 100)
    .append("xhtml:div")
    .style("font", "14px 'Helvetica Neue'")
    .html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.");

var rect1 = group.insert("svg:rect", html)
    .attr("rx", 6)
    .attr("ry", 6)
    .attr("x", 5/2)
    .attr("y", 5/2)
    .attr("id", "rect")
    .attr("width", 250)
    .attr("height", 120)
    .style("fill", 'white')
    .style("stroke", d3.scale.category20c())
    .style('stroke-width', 5);

これは（非）動作中のJsfidleの例です

4

1 に答える 1

2

編集: ここに示すように、選択する前に ID を渡してみてください: http://jsfiddle.net/GCTuD/3/ 

var rect1 = group.insert("svg:rect", "#foreign_object")

docsで指定されているように、要素タグ名で選択することはできません。定数 (id など) でのみ選択できます。

name および before セレクターは定数として指定する必要がありますが、将来的には、既存の要素または関数を挿入して名前またはセレクターを動的に生成できるようにする可能性があります。

于 2013-05-02T18:19:40.733 に答える