Controling line length d3.js
<p>I'm using the following code to produce a circle surrounded by other circles, which are all connected to the main one via <code>&lt;line&gt;</code> element. I'm trying to make them unevenly spaced from the circle, but whatever I attempt, I get some sort of chaos. The code is below:</p>

<pre><code>var width = 500,
    height = 500;
var force = d3.layout.force()
    .size([width, height])
    .charge(-400)
    .linkDistance(190)
    .on("tick", tick);
var drag = force.drag()
    .on("dragstart", dragstart);
var svg = d3.select("#orb").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "mainsvg");
var link = svg.selectAll(".link"),
    node = svg.selectAll(".node");


d3.json("graph.json", function(error, graph) {
  if (error) throw error;

  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  link = link.data(graph.links)
      .enter().append("line")
      .attr("class", "link");



  node = node.data(graph.nodes)
      .enter().append("a")      
      .attr("href", "3");

    node.append("g")
      .attr("class", "node");



    node.append("circle")
      .attr("class", "circle")
      .attr("r", function(d) { return d.r })
      .attr("fill", function(d) { return d.color })
      .attr("stroke", function(d){ return d.color })
      .on("dblclick", dblclick);

    node.append("text")
      .attr("class", "text")
      .attr("fill", "white")
      .attr("stroke", "none")
      .attr("x", function(d) { return d.x; })
      .attr("y", function(d) { return d.y; })
      .text( function (d) { return d.name; });


});

function tick() {
  link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

  svg.selectAll(".circle").attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
  svg.selectAll(".text").attr("x", function(d) { return d.x+d.xoffs; })
      .attr("y", function(d) { return d.y+d.yoffs; });
}
</code></pre>

<p>Ive tried controlling the x1/y1 and x2/y2 of the <code>&lt;line&gt;</code> element but if I move the line, the circle stays the same. Would there be a way to say, cancel equal link distance and set it for each circle individually?</p>