D3 V4 Sunburst图布局弧计算

时间:2016-07-05 16:10:38

标签: javascript d3.js d3v4

这是计算旭日节点坐标的代码:

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

1 个答案:

答案 0 :(得分:5)

请参阅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); })