Ligne reliant les points

Question

Je suis débutant dans D3js. J'ai besoin de faire un graphique comme (http://img59.imageshack.us/img59/3439/temp1a.png). Maintenant, je fais quelque chose qui ressemble (http://imageshack.us/a/img441/3079/hvd2.jpg). Comment puis-je faire une ligne reliant les points? Et peut-être d'autres conseils sur le graphique?

Mon 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") 

Answer 1

Je pense que vous voulez placer votre deuxième cercle de manière axée sur des données (plutôt que de compter sur les transformations) cette façon, vous avez accès au point plus tard, quand vous voulez dessiner la ligne:

var theta = -0.2392*Math.PI 
var rad = radius - 25; 
var circle2 = {x: Math.cos(theta)*rad, y: Math.sin(theta)*rad} 

alors vous pouvez simplement tracer la ligne comme ceci:

svg.append("line") 
.attr("transform", "translate(0," + 290 + ")") 
.attr({ 
    x1: -x(tdata[0].x), 
    x2: circle2.x + 3, 
    y1: -y(tdata[0].y), 
    y2: circle2.y + 3 
}) 
.style({ 
    stroke: "#000000" 
}) 

ici i s un exemple en direct http://tributary.io/inlet/5808514