有没有办法将 link 放在 C3.js 刻度标签中？

Question

我有一个带倒 X/Y 轴的条形图。这是我的代码和输出：

    var myData = {};
    myData.x = 'x';
    myData.xFormat = "%Y-%m-%d";
    myData.type = 'bar';
    myX = app.reportsCollection.countedByDay.plotData.X;
    myY = app.reportsCollection.countedByDay.plotData.Y;
    myX.splice(0,0,'x');
    myY.splice(0,0,'Nuevos Reportes');
    myData.columns = [];
    myData.columns.push(myX);
      //
    myData.columns.push(myY);
    var chart = c3.generate({
      bindto: elementID,
      data: myData,
      size: {
        height: 300
      },
      bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }
        // or
        //width: 100 // this makes bar width 100px
      },
      axis: {
        x: {
          type: 'timeseries',
          tick: {
                  format: "%b-%d"
              }
        },

      },
      legend: {
        show: false
      }
    });

我需要的是 link 到 X 刻度标签上的特定页面。在这个例子中，Otra 应该是一个 hyperlink。

我试图将 link 作为文本包含在 myX 变量中，但没有成功。

知道怎么做吗？

Answer 1

并非开箱即用，c3 将刻度标签呈现为 tspan 元素并使用 d3 的 .text 函数添加它们，因此尝试将 <A> 元素中的模板作为 c3 刻度函数中的文本不起作用。

在这里查看 Mark 接受的答案（不是我的答案）- put a icon on graph c3.js - d3.js - 它展示了如何用其他元素替换 c3 中的刻度标签。更改它以获取现有文本然后用几个 A 标记包装它并不难，包括适当的 href 并将其重新添加为 html.

其实tspans是可以直接包含A标签的，所以可以这样-http://jsfiddle.net/k9Dbf/745/。困难的一点是弄清楚它应该是 xlink:href 而不仅仅是 href...

fiddle 的重要部分：

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

编辑：

方案二：您也可以完全跳过 A 元素并在 tspan 上使用点击侦听器，尽管它现在需要一点 css 来提供光标指示符

d3.selectAll('.c3-axis-x .tick tspan')
  .on("click", function(d,i){
    window.open(arrayOfLinks[i], "_blank");
});

.c3-axis-x .tick tspan:hover {
  cursor: pointer;
}

有没有办法将 link 放在 C3.js 刻度标签中？

Is there a way of putting a link in a C3.js tick label?

javascript

c3.js