nvd3 馅饼外半径答案

【问题标题】：nvd3 pie outerRadiusnvd3 馅饼外半径
【发布时间】：2014-05-17 06:25:23
【问题描述】：

我不知道如何改变图中的半径

nv.addGraph( function() {

    var chart = nv.models.pieChart()
            .x(function(d) { return d.label })
            .y(function(d) { return d.value })
            .width( 520)
            .height( 250)
            .donut( true)
            .showLabels( false)


    d3.select( '#stat-lang svg')
            .datum( data)
            .transition().duration(1200)
            .call( chart)

    return chart;
});

我使用 NVD3。

【问题讨论】：

标签： d3.js pie-chart nvd3.js

【解决方案1】：

根据源码...

var availableWidth = width - margin.left - margin.right,
    availableHeight = height - margin.top - margin.bottom,
    radius = Math.min(availableWidth, availableHeight) / 2,
    arcRadius = radius-(radius / 5), // radius
    container = d3.select(this);

...半径是根据宽度和高度计算的，取两者中的最小值。因此，您只能通过将这些尺寸输入图表来调整半径，例如：

var chart = nv.models.pieChart()
    .x(function(d) { return d.label })
    .y(function(d) { return d.value })
    .showLabels(true)
    .donut(true)
    .donutRatio(0.35)
    .width(500) // width
    .height(500); // height

【讨论】：

【解决方案2】：

使用 chart.arcRadius : {"inner":0.6,"outer":0.9} 用于调整内外半径 chart.donutRatio(0.5) 是从中间切出以制作甜甜圈的饼图半径百分比。它乘以外半径来计算内半径，因此它应该在0和1之间。默认为0.5

【讨论】：

【解决方案3】：

要更改半径，请使用：

chart.arcsRadius({"inner":0.6,"outer":0.8})

更多信息请查看the examples。

【讨论】：