如何在d3js中设置xaxis标签？

Question

我是d3js的初学者。我想创建带有xaxis自定义标签的条形图。我尝试了以下代码：

var xScale = d3.scaleBand()
     .domain(["a", "b", "c", "d", "e", "f", "g"])
     .range([0, width - padding.left - padding.right]);

请检查并让我知道我的错。

Answer 1

没有可用的代码段，很难找到问题。可能是您只定义了xScale，而没有调用它。这是一个有效的示例，希望对您有所帮助：

var svg = d3
     .select("body")
     .append("svg")
     .attr("width", 200)
     .attr("height", 100)

var xScale = d3.scaleBand()
     .domain(["a", "b", "c", "d", "e", "f", "g"])
     .range([0, 200]);

svg
     .append("g")
     .attr("transform", "translate(0,80)")
     .call(d3.axisBottom(xScale));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>