D3.js scrolling perf chart

by paulocoelho

HTML

<script src="http://d3js.org/d3.v2.min.js"></script>
<div id='testdiv'></div>

CSS

svg {
  font: 10px sans-serif;
}
svg .svgPath {
  stroke-width: 2;
  stroke:#249bd5;
  stroke-opacity: 0.7;
  fill: #249bd5;
  fill-opacity: 0.2;
}
svg .line {
  fill: none;
  stroke: #999;
  stroke-width: 1px;
}
svg .line.dashed {
  stroke-dasharray: 7 7;
}
svg .graphText {
  font-size: 1em;
  font-weight: bold;
  fill:#999;
}
svg .line.red {
  stroke:#ff7e81;
}
svg .redFill {
  fill: #ff4c61;
}
svg .redLine{
   stroke:#ff4c61;
}

JavaScript

var a = [[0.1, 0.4],[0.4,0.56],[0.56,1]];

var cfg = {
    w:200,
    h:200
};

var g = d3.select("#testdiv").append("svg").attr("width", cfg.w).attr("height", cfg.h).append("g")

var arct = d3.svg.arc()
        .innerRadius(cfg.h / 4)
        .outerRadius(cfg.h / 3)
        .startAngle(0)
        .endAngle(Math.PI);

// This one works
var path = g.selectAll("circleArcs").data(a).enter().append("svg:path")
    .attr("d", arct)
    .style("fill","blue")
    .attr("transform", "translate("+cfg.w/2+","+cfg.h/2+")");

// This one does not!
var path2 = g.selectAll("circleArcs").data(a).enter().append("svg:path")
    .attr("d", function(d,i){ return arct;})
    .style("fill","green");