如何在 C3.js 条形图中聚焦单击的条？答案

【问题标题】：how to focus the clicked bar in C3.js bar graph?如何在 C3.js 条形图中聚焦单击的条？
【发布时间】：2016-01-26 07:04:40
【问题描述】：

我有这段代码使用 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 等）？

【问题讨论】：

标签： javascript d3.js c3.js

【解决方案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

希望这会有所帮助！

【讨论】：

如果我有超过1个条形图，这里提到的方法将不起作用，在这种情况下如何控制fcous和defocus，例如：jsfiddle.net/35qahpsr/2？
您将需要微调选择器以包含特定图表，如在此处完成jsfiddle.net/cyril123/35qahpsr/3

【解决方案2】：

C3 有回调，用于指定当点击（或鼠标悬停/鼠标移出）事件发生时应该发生什么：

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

它还具有“API”：您可以调用的函数基本上就像用户做出选择或聚焦一样：

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

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

但鉴于您正在寻找的确切内容，障碍将是 focus() 函数不接受图表上各个条形的索引。因此它只能一次突出显示整个列/系列数据，而不是单个条形。这是 GitHub 问题：

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

【讨论】：