C3.js 甜甜圈图，增长段答案

【问题标题】：C3.js Donut Chart,Grow SegmentC3.js 甜甜圈图，增长段
【发布时间】：2015-10-28 11:51:10
【问题描述】：

我正在探索 c3.js，我创建了一个甜甜圈图，这很简单，接下来我想做的是在鼠标悬停上我想扩展/缩放/弹出那个重点部分，这个功能我们可以在d3pai. 中看到，但我试图纯粹使用 c3.js 来实现这种效果。有人可以建议我如何进行以及如何创建这种弹出的分段效果。

var init = function() {
  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'],
        ['Coin1', 30, 200, 100, 400, 150, 250],
        ['Coin2', 130, 100, 140, 200, 150, 50],
        ['Coni3', 50, 100, 130, 240, 200, 150],
        ['Coin4', 130, 100, 140, 200, 150, 50],
        ['Coin5', 130, 150, 200, 300, 200, 100]
      ],
      type: 'donut',
      onclick: function(e) {
        //console.log(e);
        // console.log(d3.select(this).attr("stroke-width","red"));
      },
      onmouseover: function(d, i) {

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

      }
    }
  });
};
inti();

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

<html>
  <head>
<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>
    </head>
  <body>
<div id="dash"></div>
   
    </body>
  </html>

【问题讨论】：

可以修改c3的饼图源码...或者通过配置修改dom元素： onclick: function (d, i) { console.log("onclick", d, i); }, i 是对应于饼图的 dom svg 元素。如果您可以破译 svg 中的值是什么，您可能会想出一个方程式来修改它们：
这是其中一个元素的样子：<path class=" c3-shape c3-shape c3-arc c3-arc-virginica" transform="" d="M7.154998924018411e-15,-116.85A116.85,116.85 0 1,1 -45.11686019075751,107.78864238187454L0,0Z" style="fill: rgb(148, 103, 189); cursor: pointer; opacity: 1;"></path>
我浏览了 d3.js 教程，其中一个人正在创建甜甜圈聊天，在同一个示例中，他使用 transition() 移动 svg 元素，他选择了路径 (d3.selectAll("path")) ，并在其上应用过渡以移动，我还想移动一段甜甜圈以在鼠标悬停时向前弹出。在浏览器中，选择路径元素我将比例值从比例（1,1）更改为比例（1.2,1.2）它只是帮助但我无法以编程方式实现
这正是我想要在 c3 link 中实现的目标

标签： c3.js

【解决方案1】：

在c3 config对象中，可以定义onmouseover和onmouseout回调函数。与事件对应的 DOM 节点作为第二个参数传入，因此您可以在逻辑中使用它。

您可以使用它来应用诸如转换之类的东西。因此，在鼠标悬停时，您可以将其放大，而在鼠标悬停时，将其缩小。这只是朝着正确方向迈出的一步。您可以使用其他转换来获得您想要的效果。

onmouseover: function (d, i) {
    // 'i' is the dom node. 
    d3.select(i).attr("transform", "scale(1.1)")
},
onmouseout: function (d, i) {
    d3.select(i).attr("transform", "scale(1)")
}

http://jsfiddle.net/ggamir/eqkrr5j0/

如果您希望转换一直持续到下一个鼠标事件，那么您可以跟踪最后一个悬停的项目，并且仅在下一次鼠标悬停时“取消转换”它：

http://jsfiddle.net/ggamir/79qhy9hn/

// Somewhere outside before defining your c3 config object:
var currentSlice;

// Inside your c3 config object:
onmouseover: function (d, i) {
    if(currentSlice !== void 0) {
        currentSlice.attr("transform","scale(1)")
    }

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

【讨论】：

非常感谢@miir，你真是太棒了。我明白了，如果想创造像this donut chart这样的效果，我需要你的更多指导。
您对哪种效果特别感兴趣？
我看到了 morris.js 的甜甜圈图示例，我想在 c3 中制作相同的甜甜圈图。我正在尝试解决问题并尝试在 D3 lib 的基础上找到解决方案，到目前为止还没有成功:(
stackoverflow.com/questions/37008892/… @miir 这是对您答案的修改，您可能可以查看它
@user1010101 谢谢，我提交的答案概括了默认选择的数据集，并允许您通过 c3 的初始配置对象和 chart.load() 设置缩放