Question

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

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

例如，我希望切片A，切片B和C默认伸出，我该怎么做？

这是我的代码

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>";

        }
    }
});

Answer 1

c3js有两个选项，但两者都需要轻微破解'setTimeout'以强制我们的默认缩放在渲染和动画发生后发生。

可以在c3config对象中设置onrendered函数，用于初始化图表。触发重绘后触发此功能，但在DOM中进行可视化渲染之前。但是，有一个hack使用setTimeout，因为它会创建一个单独的callstack，它将在当前的callstack之后执行，其中c3恰好包括重绘图形。（explanation of setTimeout to force logic to run after current callstack executes）

{<1}}函数公开了一个load回调，在元素呈现给DOM之后触发但之前动画饰面。因此，如果将初始比例变换设置为已完成，如果由加载触发的动画使用比例变换（加载饼图似乎如此），则动画的最后一个关键帧将覆盖您修改的比例回{{1 }}。但是，我们可以类似地使用done来运行我们的代码scale(1)当前的callstack（包括动画）执行。

在探索这个问题时，我创建了一个rby答案的通用形式，我提供了两个备用路径，通过c3中公开的setTimeout和after函数设置默认比例。（Fiddle）：

onrendered

在c3config对象中，done通过初始化：

var selected = ['A', 'B', 'C']; var _ARC = '.c3-arc'; var _SCALING = '1.1'; function getCurrentlySelected() { var _PREFIX = _ARC + '-'; return d3.selectAll(_PREFIX + selected.join(', ' + _PREFIX)); }

初始化后也可以onrendered与var chart = c3.generate({ bindto: '#chart', data: { ... }, onrendered: function() { setTimeout(function() { if (selected.length > 0) { getCurrentlySelected().attr('transform', 'scale(' + _SCALING + ')'); } }); // Notice we don't need a delay, just taking advantage to force our logic to happen after current callstack is executed } });一起使用：

load

Answer 2

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

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

在c3.generate()来电后拨打此电话。

修改C3 / D3中的圆环图切片

2 个答案: