Javascript 从D3中的字符串数组创建轴？

我用一个整数数组在d3中创建了一个基本条形图

  let maxWidth = $('body').width();

  let chartWidth = maxWidth * 0.75; // also arbitrary
  let chartHeight = chartWidth / _GoldenRatio;

  let barWidth = (chartWidth / dataArray.length) - horizontalSpacing;

  let barHeightUnit = chartHeight / d3.max(dataArray);

  let mainChart = d3.select(containerSelector)
    .append('svg')
    .attr('width', chartWidth)
    .attr('height', chartHeight);

  mainChart.selectAll("rect")
    .data(dataArray)
    .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("height", function(d, i) { return (d * barHeightUnit) })
    .attr("width",barWidth)
    .attr("x", function(d, i) { return i * (barWidth + horizontalSpacing) + horizontalSpacing })
    .attr("y", function(d, i) { return chartHeight - (d * barHeightUnit) });

我用几个不同的数组做了几次。每个整数列表都与我希望沿x轴显示的字符串列表相对应。每个字符串将位于一个条的下方以标记它

---

我想不出用d3或d3轴轻松实现这一点的方法。从这个字符串列表中构造轴的简单方法是什么？

希望使用d3.v4的代码片段能有所帮助

var保证金={
前100名，
右:100,，
底数：100，
左：100
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x=d3.scaleBand（）
.范围（[0，宽度]）
.域名（[“苹果”、“橘子”、“香蕉”、“葡萄柚]）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））
希望此链接有帮助。我需要一个对当前版本的d3有效的解决方案。