Using d3 to draw a map?

Question

I'm trying to center in on a map of san francisco but fiddling around with these variables often just makes the graph disappear. It seems all these manipulate the entire globe. How would I do something like rotate what I have 90 degrees counterclockwise? Rotating from the earths center just moves it completely out of the specified center and I'm not sure how to calculate the new one.

 svg_streets.selectAll("path")
          .data(data.features)
          .enter()
          .append("path")
          .attr("d", d3.geo.path().projection(projection))
          .attr("stroke", "#888");

 var projection = d3.geo.albers()
        .center([-122.446269,37.758107])
        .rotate([0, 0, 0])
        .parallels([36, 38])
        .scale(100000)
        .translate([chart.width()/2, chart.height()/2]);

Answer 1

you could just take your main g element current viewport center and apply a rotate transformation to it. you can get your g center by taking its dimentios and its left and top positions based on the container element, and the element area