使用d3.js修改c3.js图表 [英] Using d3.js to modify c3.js chart

问题描述

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

当我将鼠标悬停在不同的甜甜圈片上时，下面是发生的屏幕截图：

我想知道是否有可能让某些甜甜圈片像DEFAULT一样扩展，而不将鼠标悬停在它们之上。

这是我的

解决方案

使用以下

  setTimeout（function（）{
 chart.internal.expandArc ['A'，'B']）
}，0）
  

来源

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

 
  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.411/c3 .min.css/>< div id =dash>< / div>  
 

b $ b

I am using C3.js to create charts. I have created a simple donut chart. Here is the screen shot:

When I hover over the different donut slices/pieces they expand. Here is a screen shot of that happening:

I was wondering if it is possible to have certain donut pieces expand like that by DEFAULT without hovering over them.

Here is my FIDDLE

I was also suggested to add the following code to make the donut pieces stick out:

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

However this makes the chart messy and the circle is not maintained anymore. Here is the screenshot:

解决方案

Use the following

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

Source

Note: The ideal solution would be to grab the mouseover callback and call it with your data but if you only want to expand the arcs just call the method above

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图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！