2016-07-01 7 views
1

мне нужно нарисовать схему SunBurst так:рисуя сектор Санберст диаграммы с использованием d3.js

enter image description here

Как вы можете видеть, что это на самом деле сектор Санберст диаграммы. Могу ли я установить startAngle и endAngle для основного круга/дуги?

Edit: Моя схема похожа: https://bl.ocks.org/mbostock/4063423

+1

Вы должны добавить некоторые ссылки, чтобы играть, демо/JSFiddle? Кроме того, это масштабируемая (https://bl.ocks.org/mbostock/4348373) или последовательность (https://bl.ocks.org/kerryrodden/7090426) sunburst? – Elfayer

ответ

2

Это вы что искали?

enter image description here

Вот изменяющаяся часть:

var partition = d3.layout.partition() 
    .sort(null) 
    .size([Math.PI, radius * radius]) // Previoulsy : .size([2 * Math.PI, radius * radius]) 
    .value(function(d) { return 1; }); 

var arc = d3.svg.arc() 
    .startAngle(function(d) { return d.x - Math.PI/2; }) // Previously : .startAngle(function(d) { return d.x; }) 
    .endAngle(function(d) { return d.x + d.dx - Math.PI/2; }) // Previously : .endAngle(function(d) { return d.x + d.dx; }) 
    .innerRadius(function(d) { return Math.sqrt(d.y); }) 
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); }); 

Смотреть демо: JSFiddle

1

Вы определенно можете установить StartAngle и endAngle в круг.

см. Код snippest from sunburst diagram.

var arc = d3.svg.arc() 
     .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); }) 
     .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); }) 
     .innerRadius(function(d) { return Math.max(0, d.y ? y(d.y) : d.y); }) 
     .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); }); 
+1

Не работает в моем случае – mrbf