在 c3 甜甜圈图中设置起点

Question

您好，我正在使用 c3js 圆环图。一切都好。我面临的唯一问题是起点和方向。我尝试更改图表的角度，但它不起作用。我想要的是以顺时针方向在圆的顶部开始图表。

这是我正在使用的代码。

_chartdata = c3.generate({
        bindto: '#handler',
        data: {
            columns: [],
            type: 'donut',
            colors: colors,
        },
        donut: {
            title: "0%",
            label: {
                show: false
            },
            width: 20,
        },
        startAngle: -90,
    });

我尝试通过添加起始角度来改变角度和方向，但是没有用：有什么方法可以改变角度吗？

这就是我想要的。

这就是我现在得到的

Answer 1

您可以在 onrendered 函数中调整甜甜圈来执行此操作。它比实际情况要复杂一些，因为文本元素需要恢复正常（您不希望它们前后颠倒并成一定角度）并且需要适应现有的转换。

更改角度变量以获得新的起始角度和方向（1 或 -1）

onrendered: function () {
    var angle = 180;
    var direction = -1;

    d3.select("#handler").selectAll(".c3-chart-arcs").each (function (d, i) {
        var d3elem = d3.select(this);
        var current = d3elem.attr("transform");
        var currentTrans = d3.transform(current);
        currentTrans.rotate = angle;
        currentTrans.scale[0] = direction;
        d3elem.attr("transform", currentTrans.toString());   // flips n rotates

        d3elem.selectAll("text").each (function () {
            var d3elem = d3.select(this);
            var current2 = d3elem.attr("transform");
            var currentTrans2 = d3.transform(current2);
                currentTrans2.rotate = angle;
                currentTrans2.scale[0] = direction;
                d3elem.attr("transform", currentTrans2.toString());  
        });
    })
}

PS 这会针对工具提示进行调整，它通过针对未缩放和扭曲的元素进行测量来获取 x 和 y：

tooltip: {
    position: function (data, width, height, element) {
        var m = d3.mouse(d3.select("#handler .c3-event-rects").node());
      var top = m[1] + 15;
      var left = m[0];
      return {top: top, left: left};
  }
},

编辑 3：

圆角更复杂。基本上 d3 允许您在圆弧上设置 cornerRadius，但 c3 不会公开这一点。唯一的方法 (AFAIK) 是在设置图表之前用两个完全相同的函数替换 c3 中的两个圆弧绘图函数，除了添加角半径值（我已经设置

c3.chart.internal.fn.getSvgArc = function () {
    var $$ = this,
        arc = $$.d3.svg.arc().outerRadius($$.radius).innerRadius($$.innerRadius).cornerRadius(($$.radius - $$.innerRadius) / 2),
        newArc = function newArc(d, withoutUpdate) {
        var updated;
        if (withoutUpdate) {
            return arc(d);
        } // for interpolate
        updated = $$.updateAngle(d);
        return updated ? arc(updated) : "M 0 0";
    };
    // TODO: extends all function
    newArc.centroid = arc.centroid;
    return newArc;
};

c3.chart.internal.fn.getSvgArcExpanded = function (rate) {
    var $$ = this,
        arc = $$.d3.svg.arc().outerRadius($$.radiusExpanded * (rate ? rate : 1)).innerRadius($$.innerRadius).cornerRadius(($$.radius - $$.innerRadius) / 2);
    return function (d) {
        var updated = $$.updateAngle(d);
        return updated ? arc(updated) : "M 0 0";
    };
};

此时您可能正在考虑关于图表的海狸点，该图表无需大量黑客操作:-)（如果 highcharts 做圆角的事情）

https://jsfiddle.net/np494kb6/6/

在 c3 甜甜圈图中设置起点

set start point in c3 Donut chart

jquery

d3.js

c3.js