如何在 C3.js 条形图中聚焦点击的条形图？

Question

我有这段代码，它使用 c3.js 制作图表：https://jsfiddle.net/1bxe2scd/

<!DOCTYPE html>
<html>
<head>
    <title>Dsnap - Charts</title>
  <!-- Load c3.css -->
  <link href="c3/c3.css" rel="stylesheet" type="text/css">

  <!-- Load d3.js and c3.js -->
  <script src="d3/d3.min.js" charset="utf-8"></script>
  <script src="c3/c3.min.js"></script>
</head>
<body>
    <div id="chart" style="width:480px;height:400px"></div>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>

  var chart = c3.generate({

                  bar: {
                      width: 15
                  },
                  padding: {
                      left: 60
                  },
                  data: {
                      x: 'Date',
                      columns:
                          [
                        ['Date', '2011-02','2013-01','2013-02','2013-03','2013-04','2013-05','2013-06','2013-07','2013-08','2013-09','2013-10','2013-11','2013-12','2014-01','2014-02'],
                        ['value', 777,53,165,269,344,376,410,421,405,376,359,392,433,455,978]
                        ],

                      type: 'bar',
                      onclick: function(e) { console.log(e.x);}


                  },
                  axis: {
                      rotated: true,
                      x: {
                          type: 'category'
                      }
                  },
                  tooltip: {
                      grouped: false
                  },
                  legend: {
                      show: false
                  }
              });

    </script>
</body>
</html>

我希望用户点击的栏成为焦点，栏的其余部分应该变淡，我该如何实现？

如何获取点击柱的 Y 值（例如：2011-02 等）？

Answer 1

您可以这样做来突出显示栏：

onclick: function(e) {
  //make all the bar opacity 0.1
    d3.selectAll(".c3-shape").style("opacity",0.1);
  var k = ".c3-shape-"+ e.index;
  //make the clicked bar opacity 1
  d3.selectAll(k).style("opacity",1)
}

工作代码here

如果您希望恢复所有条形图，请单击图表的外侧，将点击侦听器附加到图表上，然后单击使所有条形图的不透明度为 1：

d3.selectAll("#chart").on("click", function(d) {
  //reset all the bars
  d3.selectAll(".c3-shape").style("opacity", 1);
})

工作代码here

编辑

现在，由于您有两个图表，还指定了 id 以使其特定于图表，请注意选择器中的 id：(#chart/#chart1):

d3.selectAll("#chart1").on("click", function(d) {
  //reset all the bars for chart1
  d3.selectAll("#chart1 .c3-shape").style("opacity", 1);
})

d3.selectAll("#chart").on("click", function(d) {
  //reset all the bars for chart
  d3.selectAll("#chart .c3-shape").style("opacity", 1);
})

点击图表 1 的柱状图将如下所示：

onclick: function(e) {
      //make all the bar opacity 0.1 for chart1
      d3.selectAll("#chart1 .c3-shape").style("opacity", 0.1);
      var k = "#chart1 .c3-shape-" + e.index;
      //make the clicked bar opacity 1
      d3.selectAll(k).style("opacity", 1)
      event.stopPropagation()
    }

工作代码here

希望对您有所帮助！

Answer 2

C3 有回调，用于指定点击（或 mouseover/mouseout）事件发生时应该发生什么：

http://c3js.org/reference.html#data-onclick

它还有 "APIs"：您可以调用的功能基本上就像用户进行选择或聚焦一样：

http://c3js.org/reference.html#api-focus

您可以将其中一个连接起来以触发另一个，例如 onclick() 函数调用 focus()。

但是考虑到您正在寻找的东西，障碍是 focus() 函数不接受图表上各个柱的索引。所以它只能一次突出显示整个 column/series 数据，而不是单个条。这是 GitHub 问题：

https://github.com/c3js/c3/issues/1389

如何在 C3.js 条形图中聚焦点击的条形图？

how to focus the clicked bar in C3.js bar graph?

javascript

d3.js

c3.js