Question

我正在探索c3.js，我创建了一个圆环图，这很简单，接下来我想做的就是在mouser-over我想扩展/缩放/弹出那个专注的片段，这个功能我们可以在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>

Answer 1

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

您可以使用它来应用转换等内容。因此，在鼠标悬停时，您可以将其放大，在mouseout上，可以缩小它。这只是正确方向的推动。您可以使用其他变换来获得所需的效果。

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/

如果您希望转换持续到下一个鼠标事件，那么您可以跟踪悬停在上面的最后一个项目，并且只有＆＃34; de-transform＆＃34;它在下一次鼠标悬停时：

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

C3.js甜甜圈图表，成长段

1 个答案: