title: Controling line length d3.js
body: <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>