title: Line connecting the points
body: <p>I'm newbie in D3js. I need to make a graph like (<a href="http://img59.imageshack.us/img59/3439/temp1a.png" rel="nofollow">http://img59.imageshack.us/img59/3439/temp1a.png</a>).
  Now I'm making something that look's like (<a href="http://imageshack.us/a/img441/3079/hvd2.jpg" rel="nofollow">http://imageshack.us/a/img441/3079/hvd2.jpg</a>).
  How can I make line connecting the points? And maybe some other advise about graph? </p>
  
  <p>My code:</p>
  
  <pre><code>var width = 400,
  height = 400,
  radius = 320;
  
  var width = 400,
  height = 400,
  radius = 320;
  
  bdata = [{"value":10},
      {"value":10},
      {"value":20},
      {"value":10},
      {"value":10}];
  
  tdata = [{"x":0.5, "y":10.5}];
  
  var s = ([65]);
  
  var color = d3.scale.ordinal()
  .range(["#d2000e", "#ffce00", "#00a600", "#ffce00", "#d2000e"]);
  
  var pie = d3.layout.pie()
      .value(function(d) { return d.value; })
      .sort(null)
      .startAngle(0)
  .endAngle((Math.PI/2));
  
  var arc = d3.svg.arc()
  .innerRadius(radius - 26)
  .outerRadius(radius - 20);
  
  var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .data([bdata])
    .append("g")
  .attr("transform", "translate(40, 40)");
  
  var path = svg.selectAll("path")
    .data(pie)
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc)
    .attr("transform", "translate(0," + 299.5 + ")");
  
  var x = d3.scale.linear()
              .domain([0, 200])
              .range([0, 300]);
  
  var y = d3.scale.linear()
              .domain([0, 20])
              .range([300, 0]);
  
  var radius = d3.scale.linear()
              .domain([0, 9])
              .range([180, 240]);
  
  var fill = d3.scale.linear()
              .domain([0, 9])
              .range(["red", "steelblue"]);
  
  var xAxis = d3.svg.axis()
              .scale(x)
              .orient("bottom")
              .ticks(4);
  
  var yAxis = d3.svg.axis()
              .scale(y)
              .orient("left")
              .ticks(4);
  
  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + 300 + ")")
    .call(xAxis)
  .append("text")
    //.attr("transform")
    .attr("x", 315)
    .attr("y", 5)
    .attr("dx", ".71em")
    .style("text-anchor", "middle")
    .text("m3/hr");    
  
  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
  .append("text")
    .attr("y", -10)
    .attr("dy", ".71em")
    .style("text-anchor", "middle")
    .style("color", "#222")
    .text("bar");
  
  var circles = svg.selectAll("circle")
                  .data(tdata)
                  .enter()
                  .append("circle");                  
  
  var circleAttr = circles
              .attr("transform", "translate(0," + 290 + ")")
              .attr("cx", function (d) { return -x(d.x); })
              .attr("cy", function (d) { return -y(d.y); })
              .attr("r", 7);  
  
  var g2 = svg.selectAll("circle")
  .data(d3.range(0, 2))
  .enter()
   .append("svg:g")
  
  .attr("transform", "translate(0," + 300 + ")");
  
  
  var circle = g2.selectAll("circle")
  .attr("class", "secpoint")
  .data(d3.range(1))
  .enter()
  .append("svg:circle")
      .attr("transform", function(d) { return "rotate(" + -s + ")"; })
  .attr("cx", d3.scale.linear().domain([0, 1]).range([297, 297]))
  .attr("r", 7)
  .attr("stroke", "black")
  </code></pre>