如何让D3环形图组合的小圆与线连接

Question

嗨可以任何人帮助我创建一个D3图表，在这个图表中我需要制作许多小圆圈并用线连接这些小圆圈。

Answer 1

这里是你可以做的一种方式，给出以下nodes和links

var nodes = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']; 
var links = [{ 
    source: 10, 
    target: 11 
}, { 
    source: 10, 
    target: 1 
}, { 
    source: 10, 
    target: 2 
}, { 
    source: 10, 
    target: 3 
}, { 
    source: 10, 
    target: 4 
}, { 
    source: 10, 
    target: 5 
}, { 
    source: 10, 
    target: 6 
}, { 
    source: 10, 
    target: 9 
}]; 

var pi = 3.14; 
var r1 = 200; 
var r2 = 20; 
var height = 700; 
var width = 700; 
var cx = height/2; 
var cy = width/2; 
var delta = (2 * pi)/12; 

var circleGroup = d3.select('#svg').append('svg') 
    .attr('height', height) 
    .attr('width', width) 
    .append('g') 
    .attr('transform', 'translate(' + cx + ',' + cy + ')'); 

circleGroup.append('circle') 
    .attr('class', 'big-circle') 
    .attr('r', r1); 

circleGroup.selectAll('.link') 
    .data(links) 
    .enter().append('line') 
    .attr('class', 'link') 
    .attr('x1', function(d) { 
     return getX(nodes[d.source]); 
    }) 
    .attr('y1', function(d) { 
     return getY(nodes[d.source]); 
    }) 
    .attr('x2', function(d) { 
     return getX(nodes[d.target]); 
    }) 
    .attr('y2', function(d) { 
     return getY(nodes[d.target]); 
    }); 

circleGroup.selectAll('.little-circle') 
    .data(nodes) 
    .enter().append('circle') 
    .attr('class', 'little-circle') 
    .attr('r', r2) 
    .attr('cx', getX) 
    .attr('cy', getY); 

circleGroup.selectAll('.label') 
    .data(nodes) 
    .enter().append('text') 
    .attr('class', 'label') 
    .attr('x', getX) 
    .attr('y', getY) 
    .text(function(d) { 
     return d; 
    }); 

function getX(d) { 
    var theta = +d * delta; 
    return r1 * Math.cos(theta); 
} 

function getY(d) { 
    var theta = +d * delta; 
    return r1 * Math.sin(theta); 
} 

这里有一个working JSFiddle example

你将不得不调整的节点如何添加等你拿能得到所需的顺序:)