連接點的線

Question

我是D3js的新手。我需要製作一個圖形（如http://img59.imageshack.us/img59/3439/temp1a.png）。 現在我正在做一些看起來像（http://imageshack.us/a/img441/3079/hvd2.jpg）的東西。 我怎樣才能讓線連接點？也許還有一些關於圖形的建議？

我的代碼：

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

我想你想放置在數據驅動的方式（而不是依賴於變換）這樣，你有機會獲得點以後你的第二個圈子，當你想畫行：

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

那麼你可以簡單地畫線，像這樣：

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

在這裏，我這是一個生動的例子 http://tributary.io/inlet/5808514