Question

这是一个简单的问题，我似乎无法理解 - 我想要做的就是改变页面上元素的位置。我尝试了以下内容：

// 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上更容易看到。感谢您提出基本问题的帮助，

Answer 1

以下是使用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

我认为您遇到的问题是，在选择文本时，您将获得一个HTML元素而不是SVGText元素（似乎您需要一个SVG元素来允许d3js进行操作）。您还需要确保文本的（x，y）坐标落在给定画布内。

在页面JS / D3上更改元素位置

1 个答案: