修改C3 / D3中的圆环图切片 [英] Modify Donut Chart Slices in C3/D3

问题描述

我使用c3.js创建了一个简单的圆环图。这是 FIDDLE 。

I have created a simple donut chart using c3.js. Here is the FIDDLE.

如果你将鼠标悬停在一片甜甜圈它会伸出来。我想知道切片是否可以默认伸出而不悬停。

If you hover over a slice of the Donut it will stick out. I was wondering if it is possible for the slice to stick out by default without hovering over.

例如我希望切片A，切片B和C默认伸出我怎样才能做到这一点？

For example i want slice A, slice B, and C to stickout by default How can I do that?

这是我的代码

var currentSlice;

var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
            ['A', 30, 200, 100, 400, 150, 250],
            ['B', 130, 100, 140, 200, 150, 50],
            ['C', 50, 100, 130, 240, 200, 150],
            ['D', 130, 100, 140, 200, 150, 50],
            ['E', 130, 150, 200, 300, 200, 100]
        ],
        type: 'donut',
        onclick: function (e) {

        },
        onmouseover: function (d, i) {
            if(currentSlice !== void 0) {
                'currentSlice'.attr("transform","scale(1)")
            }

            currentSlice = d3.select(i).attr("transform", "scale(1.1)");


        },
        onmouseout: function (d, i) {

        }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d',
                centered: true,
                position: 'inner-right'
            }
        }
    },
    bindto: '#dash',
    bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }

    },
    pie: {
        expand: true,
    },
    tooltip: {
        grouped: false,
        contents: function (data, defaultTitleFormat, defaultValueFormat, color) {
            //  console.log("Containt");
            // console.log(data, defaultTitleFormat, defaultValueFormat, color);
            return "<p style='border:1px solid red;'>" + data[0].value + "</p>";

        }
    }
});

推荐答案

您可以使用setTimeout（）来缩放特定切片，一旦图表被渲染。这是一种方式：

You can use setTimeout() to scale specific slices, once the chart is rendered. Here's one way:

setTimeout( function() {
  d3.selectAll('.c3-arc-A, .c3-arc-B, .c3-arc-C').attr("transform", "scale(1.2)");       
}, 5);

在 c3.generate（）致电。

这篇关于修改C3 / D3中的圆环图切片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！