Заполните внутреннюю часть пирога пончик диаграммы d3

Example Я пытаюсь создать изображение выше, используя d3Заполните внутреннюю часть пирога пончик диаграммы d3

var dataset = { 
hddrives: [20301672, 9408258, 2147483, 21474836, 35622,32210000], 
}; 

var width = 460, 
height = 300, 
radius = Math.min(width, height)/2; 

var color = d3.scale.ordinal() 
.range(["#2DA7E2"]); 

var pie = d3.layout.pie() 
.sort(null); 

var arc = d3.svg.arc() 
.innerRadius(radius - 100) 
.outerRadius(radius - 70); 

var svg = d3.select("body").append("svg") 
.attr("width", width) 
.attr("height", height) 
.append("g") 
.attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

var path = svg.selectAll("path") 
.data(pie(dataset.hddrives)) 
    .enter().append("path") 
.attr("class", "arc") 
.attr("fill", function(d, i) { return color(i); }) 
.attr("d", arc); 
svg.append("text") 
    .attr("dy", ".35em") 
    .style("text-anchor", "middle") 
    .attr("class", "inside") 
    .text(function(d) { return '56%'; }); 
svg.append("text") 
    .attr("dy", "2em") 
    .style("text-anchor", "middle") 
    .attr("class", "data") 
    .text(function(d) { return 'some text'; });

Im изо всех сил, чтобы увидеть, как иметь дело с цветом фона внутреннего круг и дело с пространством слева для хранения

Благодаря

источник

2014-02-13 Rob Paddock

Для первого вы добавите отдельный «круг» и заполните его соответствующим образом. Для последнего вам понадобится фиктивный элемент, представляющий свободное пространство, которое вы не знаете. –

Спасибо, что я обновил скрипку, чтобы отсортировать фон, просто не уверен, как это сделать со свободным пространством. –

Что-то вроде [this] (http://jsfiddle.net/LBzx7/2/), где вы устанавливаете прозрачность по атрибуту. –

Чтобы получить «фон», вы может добавить еще один круг с соответствующим цветом заливки. Для того, чтобы иметь дело со свободным пространством, вы можете выборочно установить прозрачность одного из сегментов на 0. В вашем примере, я сделал это за последний кусочек:

.style("opacity", function(d, i) { return i == dataset.hddrives.length - 1 ? 0 : 1; })

Полный пример (предоставляется OP) here ,

источник

2014-02-13 17:30:21

Заполните внутреннюю часть пирога пончик диаграммы d3

ответ

Смежные вопросы