d3.js - 如何在 d3js 中设置 xaxis 标签？

Question

我是 d3js 的初学者。我想用 xaxis 的自定义标签创建一个条形图。我尝试了以下代码，但它不起作用，我无法正确看到 xaxis 刻度。请检查它并让我知道我在代码中的问题。

         dataset = [10, 15, 34, 16, 47, 98, 53]
         var svg = d3.select(".activecounts")
             .append("svg")
             .attr("width", width)
             .attr("height", height);

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

         var yScale = d3.scaleLinear()
             .domain([0, d3.max(dataset)])
             .range([height - padding.top - padding.bottom, 10]);

         var xAxis = d3.axisBottom()
             .scale(xScale)

         var yAxis = d3.axisLeft()
             .scale(yScale)

         var rectPadding = 4;

         var rects = svg.selectAll(".MyRect")
             .data(dataset)
             .enter()
             .append("rect")
             .attr("class", "MyRect")
             .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
             .attr("x", function(d, i) {
                 return xScale(i) + rectPadding / 2;
             })
             .attr("y", function(d) {
                 return yScale(d);
             })
             .attr("width", xScale.bandwidth() - rectPadding)
             .attr("height", function(d) {
                 return height - padding.top - padding.bottom - yScale(d);
             });
         var texts = svg.selectAll(".MyText")
             .data(dataset)
             .enter()
             .append("text")
             .attr("class", "MyText")
             .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
             .attr("x", function(d, i) {
                 return xScale(i) + rectPadding / 2;
             })
             .attr("y", function(d) {
                 return yScale(d);
             })
             .attr("dx", function() {
                 return (xScale.bandwidth() - rectPadding) / 2;
             })
             .attr("dy", function(d) {
                 return -10;
             })
             .text(function(d) {
                 return d;
             });

         svg.append("g")
             .attr("class", "axis")
             .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
             .call(xAxis);


         svg.append("g")
             .attr("class", "axis")
             .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
             .call(yAxis);

请检查一下，让我知道我的错。我更新了上面的代码来展示我是如何制作我的条形图的。请检查并让我知道是否需要进一步澄清。

标签： d3.js

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>

编辑：根据您的新代码，这是一个工作示例。xScale 函数的输入应该是域中的东西，例如“a”或“b”等。因此，使用索引 i，如果将其存储在数组中，则可以引用相应的域。

var height = 200;
var width = 300;

dataset = [10, 15, 34, 16, 47, 98, 53]
         var svg = d3.select("body")
             .append("svg")
             .attr("width", width)
             .attr("height", height);

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

         var yScale = d3.scaleLinear()
             .domain([0, d3.max(dataset)])
             .range([height - padding.top - padding.bottom, 10]);

         var xAxis = d3.axisBottom()
             .scale(xScale)

         var yAxis = d3.axisLeft()
             .scale(yScale)

         var rectPadding = 4;

         var rects = svg.selectAll(".MyRect")
             .data(dataset)
             .enter()
             .append("rect")
             .attr("class", "MyRect")
             .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
             .attr("x", function(d, i) {
                 return xScale(domain[i]) + rectPadding / 2;
             })
             .attr("y", function(d) {
                 return yScale(d);
             })
             .attr("width", xScale.bandwidth() - rectPadding)
             .attr("height", function(d) {
                 return height - padding.top - padding.bottom - yScale(d);
             });
         var texts = svg.selectAll(".MyText")
             .data(dataset)
             .enter()
             .append("text")
             .attr("class", "MyText")
             .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
             .attr("x", function(d, i) {
                 return xScale(domain[i]) + rectPadding / 2;
             })
             .attr("y", function(d) {
                 return yScale(d);
             })
             .attr("dx", function() {
                 return (xScale.bandwidth() - rectPadding) / 2;
             })
             .attr("dy", function(d) {
                 return -10;
             })
             .text(function(d) {
                 return d;
             });

         svg.append("g")
             .attr("class", "axis")
             .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
             .call(xAxis);


         svg.append("g")
             .attr("class", "axis")
             .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
             .call(yAxis);

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