这是计算旭日节点坐标的代码:
var arc = d3.svg.arc()
.startAngle(function(d) { return d.x; })
.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); });
地点:
x:节点位置的最小x坐标
y:节点位置的最小y坐标
dx:节点位置的x轴范围
dy: 节点位置的y轴范围
但是,在最近发布的 v4 版本中,空间填充布局 d3.treemap 和 d3.partition 现在在每个节点上输出 x0、x1、y0、y1,而不是 x0、dx、y0、dy
node.x0 - 矩形的左边缘
node.y0 - 矩形的上边缘
node.x1 - 矩形的右边缘
node.y1 - 矩形的底边
v4 的相应代码是什么,因为以下不会产生正确的布局?
var arc = d3.arc()
.startAngle(function(d) { return d.x0; })
.endAngle(function(d) { return d.x0 + (d.x1 - d.x0); })
.innerRadius(function(d) { return d.y0; })
.outerRadius(function(d) { return d.y0 + (d.y1 - d.y0); });
参见 codepen
最佳答案
参见 codepen
var data = {...}
var width = 960;
var height = 700;
var radius = Math.min(width, height) / 2;
var color = d3.scaleOrdinal(d3.schemeCategory20c)
var g = d3.select('#container')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + width/2 + ',' + height/2 + ')');
var partition = d3.partition()
.size([360, radius])
.padding(0)
//.round(true); //this will produce weird leaf node size if true
var root = d3.hierarchy(data, function(d) { return d.children })
.sum( function(d) {
if(d.children) {
return 0
} else {
return 1
}
})
.sort(null);
partition(root)
var xScale = d3.scaleLinear()
.domain([0, radius])
.range([0, Math.PI * 2])
.clamp(true);
var arc = d3.arc()
.startAngle(function(d) { return xScale(d.x0) })
.endAngle(function(d) { return xScale(d.x1) })
.innerRadius(function(d) { return d.y0 })
.outerRadius(function(d) { return d.y1 })
var path = g.selectAll('path')
.data(root.descendants())
.enter().append('path')
.attr("display", function(d) { return d.depth ? null : "none"; })
.attr("d", arc)
.attr("fill-rule", "evenodd")
.style('stroke', '#fff')
.style("fill", function(d) { return color((d.children ? d : d.parent).data.name); })
关于javascript - D3 V4 旭日图布局圆弧计算,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38208049/