使用javascript d3移动树的位置

Question

I'm creating a diagram with D3 and JSON which is based on this:

http://bl.ocks.org/mbostock/4063550

I'm completely new to this...and I just can't seem to figure out how to move the position of the tree to the right or left of the page. Seems simple enough?

Reason I'm asking is because some of my text are cut out on the left side of screen.

Any help appreciated!

Answer 1

The easiest way to do this is to adjust the transform parameter of the top-level g element. In the example, it is created like this.

var svg = d3.select("body").append("svg")
  .attr("width", diameter)
  .attr("height", diameter - 150)
.append("g")
  .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

To move everything to the right, you would need to add something to the x translation, eg

var svg = d3.select("body").append("svg")
  .attr("width", diameter)
  .attr("height", diameter - 150)
.append("g")
  .attr("transform", "translate(" + (diameter / 2 + 10) + "," + diameter / 2 + ")");