移动栏的位置标签，最大化/最小化屏幕，文字不稳定（在C3.js - D3.js）

Question

我创建了一个图表栏，在c3.js中添加了修改d3.js. 我希望每个栏的开头都有条形文本，然后在d3.js中使用以下代码。

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

问题是当我移动窗口时。 它使文本不安。默认情况下，文本最初显示在右侧。

我能做些什么来修复它？ 非常感谢你。

https://jsfiddle.net/ezd1ggwa/

Answer 1

首先移动所有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()
  }
});

在这里工作代码