移动条形图的位置标签，最大化/最小化屏幕，文本不稳定（in 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');
});

问题出在我移动 window 时。它使 text.the 文本默认显示在右侧，如最初一样。

我能做些什么来解决它？非常感谢。

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

工作代码here

移动条形图的位置标签，最大化/最小化屏幕，文本不稳定（in C3.js - D3.js）

move position labels of bar, to maximize / minimize the screen, the text unsettle ( in C3.js - D3.js)

javascript

d3.js

c3.js