title: D3js gauge graph
body: <p>I'm getting started with d3js <a href="http://d3js.org" rel="nofollow">http://d3js.org</a> and all I need at the beginning is gauge icon.
  It displays how many time of auction run out and in which state auction is. There will be more icons on page.
  Here is fiddle <a href="http://jsfiddle.net/TdWtC/" rel="nofollow">http://jsfiddle.net/TdWtC/</a></p>
  
  <p>First load is ok but I need help with update. On update both have to be updated background and pointer. The main problem is that on update background overlaps pointer.
  Probably I'm doing it totally wrong but I customized similar snippet and cannot move on.</p>
  
  <p>this is the part where background overlaps pointer</p>
  
  <pre><code>this.body.append("svg:path")
          .style("fill", color)
          .attr("d", d3.svg.arc()
          .startAngle(this.valueToRadians(start))
          .endAngle(this.valueToRadians(end))
          .innerRadius(0.4 * this.config.raduis)
          .outerRadius(this.config.raduis))
          .attr("transform", function() { return "translate(" + self.config.cx + ", " + self.config.cy + ") rotate(270)" });
  </code></pre>
  
  <p>Thanks for help</p>