C3.js甜甜圈图，成长段

我正在探索c3.js，我创建了一个甜甜圈图表，这很容易做，接下来我想做的事情是在mouser-over上我想展开/缩放/突出重点细分，这个功能我们可以在d3pai.看到，但我试图达到纯粹使用c3.js的效果。可以有人请告诉我如何继续以及如何创建这种段效应的弹出。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>

来源

2015-10-28 Akash R

您可以修改C3的饼图源代码或者通过CONFI gui，修改dom元素： onclick：function（d，i）{console.log（“onclick”，d，i）; }， 'i'是对应于该馅饼切片的dom svg元素。如果你可以破译svg中的值，你可能会想出一个方程式来修改它们： – miir

这就是其中一个元素的样子：'' – miir

我经历了d3.js教程，其中人正在创建甜甜圈聊天，在他使用transition（）移动svg元素的同一示例中，他选择了路径（d3.selectAll “路径”）），并在其上应用转场来移动，我也想移动一段甜甜圈以便在鼠标悬停时向前弹出。在浏览器中，选择路径元素我改变比例值的形式尺度（1,1）来缩放（1.2,1.2）它只是帮助，但我不能以编程方式实现 –

在C3配置对象，你可以定义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)"); 
}

来源

2015-10-29 21:32:09 miir

非常感谢你@miir，你是超棒的。我明白了，我想要更多的指导，如果你想创造像[这个甜甜圈图表]（http://jsbin.com/ukaxod/144/embed?js,output）我改变了什么属性的效果。 –

您对哪些效果感兴趣？ – miir

我看到morris.js为甜甜圈图表示例，我想在c3中制作相同的甜甜圈图表。我试图解决问题，并尝试找到解决方案的基础上的D3库，迄今没有成功:( –

C3.js甜甜圈图，成长段

回答

相关问题