可点击的图表数据点以打开新页面答案

【问题标题】：Clickable chart data points to open new pages可点击的图表数据点以打开新页面
【发布时间】：2019-11-04 16:15:36
【问题描述】：

我希望能够单击栏并直接打开与该栏关联的新页面。

我已经研究并能够使 x 轴可点击，但我需要条形或圆形可点击。

var chart = c3.generate({
  bindto: '#chart',
  data: {
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250],
      ['data2', 50, 20, 10, 40, 15, 25]
    ],
    type: 'bar'
  },
  axis: {
    rotated: true
  }
});

var arrayOfLinks = [
  "http://google.com",
  "http://google.com",
  "http://google.com",
  "http://google.com",
  "http://google.com",
  "http://google.com",
];

d3.selectAll('.c3-axis-x .tick tspan')
  .each(function(d, i) {
    // augment tick contents with link
    var self = d3.select(this);
    var text = self.text();
    self.html("<A xlink:href='" + arrayOfLinks[i] + "'>" + text + "</A>");
  });

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.11/c3.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.11/c3.min.js"></script>
<div id="chart"></div>

我几乎可以肯定，修复就在这行代码中：

d3.selectAll('.c3-axis-x .tick tspan')

参数应该是什么？ 'data.coloums[1]','bar'?

请多指教。

【问题讨论】：

你能在这里添加一个可重现的sn-p吗？
感谢您的编辑。我会继续前进。
尝试使用.c3-bar 选择器。并检查它们最有可能是一些path 或rect 元素的元素。另外，检查rect 选择here
试过'.c3-bar', '.c3-rect'....我希望有人知道确切的关键字

标签： javascript d3.js c3.js

【解决方案1】：

正如问题中的here 所指出的，对于条形图，您可以在传入数据时指定onclick 函数。这个函数可以触发一个偶数到window.open的链接。

代码的sn-p在这里：

var chart = c3.generate({
  bindto: '#chart',
  data: {
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250],
      ['data2', 50, 20, 10, 40, 15, 25]
    ],
    type: 'bar',
    //define the onclick function
    onclick: function (d) { 
      console.log(d) //checks the data
      //note that the index for the values gets passed as d.x
      window.open(arrayOfLinks[d.x]); 
    },
  },
  axis: {
    rotated: true
  },

});

代码的完整工作块在这里：

http://bl.ocks.org/akulmehta/87f4903a4686deb8285381b8e816ce4d

【讨论】：