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

Question

I've created a basic bar chart in d3 from an array of integers.

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

I do this a few times with a few different arrays. Each list of integers corresponds with a list of strings that I'd like to display along the x-axis. Each string will lie below one bar to label it.

I can't figure out a way to do this easily with d3 or d3-axis. What is an easy way to construct an axis from this list of strings?

Answer 1

Hope this snippet using d3.v4 helps.

 var margin = { top: 100, right: 100, bottom: 100, left: 100 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scaleBand() .range([0, width]) .domain(["apple", "orange", "banana", "grapefruit"]); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); 

 <script src="https://d3js.org/d3.v4.min.js"></script>