移动条的位置标签,以最大化/最小化屏幕,文本不稳定(在C3.js-D3.js中)

首先移动所有d3活动,将文本移动到如下的调整大小函数中:

function resize() {

  d3.selectAll('.c3-axis-x .tick')
    .each(function(d, i) {
      // clear tick contents and replace with image
      var self = d3.select(this);
      //  self.selectAll("*").remove();
      self.append('image')
        .attr("xlink:href", arrayOfPics[i])
        .attr("x", -40)
        .attr("y", -20)
        .attr("width", 25)
        .attr("height", 25);
    });

  d3.selectAll('.c3-axis-x .tick')
    .each(function(d, i) {
      // clear tick contents and replace with image
      var self = d3.select(this);
      //  self.selectAll("*").remove();
      self.append('text')
        .attr("x", 50)
        .attr("y", -110)
        .style("text-anchor", "middle")
        .text("this text is a indicator");
    });
  d3.select('.c3-axis-x').attr("clip-path", null);

  d3.selectAll('.c3-text')
    .each(function(d) {
      var self = d3.select(this);
      self.attr('x', '5');
    });

}

现在,在图表调整大小时,按如下方式调用此函数:

var chart = c3.generate({
  bindto: '#chart',
  size: {
    height: 500,
   }
   ....
  onresized: function() {//callback called on resize of a chart
    resize()
  }
});

工作代码 here