Question

This is a simple question that I just can’t seem to get figured out — All I want to do is change the position of an element on a page. I’ve tried the following:

// 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")

However, none of this moves the text — What am I missing (http://jsfiddle.net/Hn5JX/)? I’m having the same issue moving svg elements around a page, i just thought this was easier to see on the jsfiddle. Thanks for help with a basic question,

Answer 1

Here’s an example of moved text using d3js.
http://jsfiddle.net/JnNtZ/

Make sure to include:

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

Then include the following 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

​
I think the problem you were running into is that upon selecting text, you’re getting an HTML element instead of an SVGText element (It seems you need an SVG element to allow manipulations by d3js). You also need to make sure that the (x,y) coordinates of the text fall inside the given canvas.