Question

我正在使用C3.js来创建图表。我创建了一个简单的圆环图。这是屏幕截图：

当我将鼠标悬停在不同的甜甜圈片上时，它们会膨胀。以下是发生这种情况的屏幕截图：

我想知道是否有可能让某些甜甜圈片像DEFAULT那样展开而不会悬停在它们之上。

这是我的FIDDLE

我还建议添加以下代码以使甜甜圈片突出：

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

然而，这会使图表变得混乱，并且不再维持圆圈。这是截图：

Answer 1

使用以下

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

Source

注意：理想的解决方案是获取mouseover回调并使用您的数据调用它，但如果您只想扩展弧线，请调用上面的方法

var currentSlice;

var chart = c3.generate({
  bindto: '#dash',
  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'
  },
  axis: {
    x: {
      type: 'timeseries',
      tick: {
        format: '%Y-%m-%d',
        centered: true,
        position: 'inner-right'
      }
    }
  },
  bar: {
    width: {
      ratio: 0.5 // this makes bar width 50% of length between ticks
    }
  },
  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'])
}, 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.11/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" />
<div id="dash"></div>

使用d3.js修改c3.js图表

1 个答案: