图表弧在刷新后收缩

Question

我有一个圆环图，其中某些圆环突出。这是屏幕截图。

橙色、红色和蓝色的弧线突出，我希望它们永久突出，但是当我将鼠标悬停在任何部分上时，它们会像这样收缩并变得正常。

我们正在使用超时功能使碎片突出：

setTimeout(function () {
    chart.internal.expandArc(['A', 'B', 'D'])
}, 0)

这是我的 FIDDLE

我想知道这是否是一个 JavaScript 问题，或者我如何才能改变它以使弧形永久突出。

Answer 1

您可以再次调用 expandArc 函数以在鼠标移出时重置它：

onmouseout: function (d, i) {
  chart.internal.expandArc(['A', 'B', 'D']);
}

已更新 fiddle。

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) {
        
            
     
            
            
        },
        onmouseout: function (d, i) {
     chart.internal.expandArc(['A', 'B', 'D'])
        }
    },
    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(function () {
    chart.internal.expandArc(['A', 'B', 'D'])
}, 0)

 p {
   line-height: 1;
   font-weight: bold;
   padding: 5px 12px;
   background: rgba(0, 0, 0, 0.8);
   color: #fff;
   border-radius: 4px;
   line-height: 15px;
   font-size: 12px;
   min-width: 91px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>
<div id="dash"></div>

Answer 2

您可以覆盖 chart.internal.unexpandArc 以不对您要保持扩展的扇区执行任何操作。

你的 setTimeout 变成

setTimeout(function() {
  chart.internal.expandArc(['A', 'B', 'D'])
  var originalUnexpandArc = chart.internal.unexpandArc;
  chart.internal.unexpandArc = function(targetIds) {
    if (typeof targetIds === "string") {
      if (['A', 'B', 'D'].indexOf(targetIds) !== -1) {
        return;
      }
    }
    else {  
      targetIds = targetIds.filter(function(id) { return ['A', 'B', 'D'].indexOf(id) === -1; });
    }
    return originalUnexpandArc.apply(this, [ targetIds ]);
  }
}, 0);

已更新 fiddle - https://jsfiddle.net/161jdsq9/

图表弧在刷新后收缩

Chart arcs shrink after refresh

html

javascript

css

d3.js

c3.js