Итак, у меня есть довольно стандартная диаграмма D3 «Солнечные лучи». Однако центральный путь (то есть корень) слишком велик. Он занимает большую часть моей диаграммы, которая тратится впустую, поскольку более важные дуги вокруг него борются за место.
Я собираюсь добавить метки на внешние кольца, но мне нужно больше места.
Смотри ниже.
Я хочу сделать центральный круг (светло-серый) меньше, а внешние кольца толще.
Кто-нибудь может мне помочь?
Вот мой код:
var width = 850,
height = 700,
padding = 6,
duration = 750,
labelLimit = 120,
radius = Math.min(width, height) / 2 - 10;
var x = d3.scale.linear()
.range([0, 2 * Math.PI]);
var y = d3.scale.sqrt()
.range([0, radius]);
var svg = d3.select("#wheel")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("id", "scan")
.attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");
var partition = d3.layout.partition()
.value(function(d) { return d.size; });
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, y(d.y)); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
var path = svg.selectAll("path")
.data(partition.nodes(bp.data.preparedData))
.enter()
.append("path")
//.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
.attr("d", arc)
.attr("id", function(d) { return d.ci_type === 'type' || d.ci_type === 'provider' ? d.name : ''; })
.attr("class", 'context')
.attr("data-toggle", 'context')
.attr("data-target", '#context-menu')
.attr("data-name", function(d) { return d.name; })
.attr("data-type", function(d) { return d.type; })
.attr("data-provider", function(d) { return d.provider; })
.attr("data-ci_type", function(d) { return d.ci_type; })
.style("fill", function(d) { return bp.draw.getColor(d); });
var text = svg.selectAll("text")
.data(partition.nodes(bp.data.preparedData));
var textEnter = text.enter()
.append("text")
.style("fill-opacity", 1)
.style("font-weight", 200)
//.style("letter-spacing",1)
.style("fill", function(d) { return bp.draw.getLabelColor(d); })
.attr("font-size", function(d) { return d.ci_type === 'type' ? 12 : 16})
.attr("text-anchor", function(d) {
return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
})
.attr("dy", ".2em")
.attr("transform", function(d) {
var multiline = (d.name || "").split(" ").length > 1,
angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
rotate = angle + (multiline ? -.5 : 0);
return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
})
.attr("class", 'cursor')
.attr("data-toggle", 'context')
.attr("data-target", '#context-menu')
.attr("data-name", function(d) { return d.name; })
.attr("data-type", function(d) { return d.type; })
.attr("data-provider", function(d) { return d.provider; })
.attr("data-ci_type", function(d) { return d.ci_type; })
textEnter.append("tspan")
.attr("x", 0)
.text(function(d) { return d.depth ? d.name : ""; });