3

これは単純な質問ですが、私には理解できないようです。私がやりたいことは、ページ上の要素の位置を変更することだけです。私は次のことを試しました：

// Text
body = d3.select('body')
sometext = body.append('text').text('testing') // text appears

// Different Ways i've tried to move it
.attr('cx', 40)
.attr('x', 40)
.attr("transform", "translate("40, 100")

ただし、これはテキストを移動しません-何が欠けていますか (http://jsfiddle.net/Hn5JX/)? ページ内で svg 要素を移動するときに同じ問題が発生しています。これは jsfiddle の方が見やすいと思いました。初歩的な質問ですが、よろしくお願いします

4

1 に答える 1

6

d3js を使用してテキストを移動した例を次に示します。 http://jsfiddle.net/JnNtZ/

以下を必ず含めてください。

"http://mbostock.github.com/d3/d3.js"

次に、次のJavaScriptを含めます

// Create an svg "canvas" to place text on
var w = 400, h = 400;    
var vis = d3.select("body")
  .append("svg")
    .attr("width", w)
    .attr("height", h);

// Add text and set attributes
var text1 = vis.append('text').text('text1');
var text2 = vis.append('text').text('text2');
text1.attr("y", "300").style("fill", "red");
text2.attr("x", "200").attr("y", "403").style("fill", "blue");  // Notice how this text is on the edge of the canvas

あなたが遭遇した問題は、テキストを選択すると、SVGText 要素ではなく HTML 要素を取得していることだと思います (d3js による操作を可能にするには、SVG 要素が必要なようです)。また、テキストの (x,y) 座標が指定されたキャンバス内に収まるようにする必要があります。

于 2012-06-14T06:44:55.320 に答える