如何在 D3 v6 中调整条形图的 y 轴比例？

Question

我现在正在尝试创建一个条形图，但目前我面临一个问题，即我的条形与数据相比没有正确缩放。这是我在 D3 中的代码：

var third_width = 1000;
var third_height = 450;
var third_padding = 30;
    
var third_countries = ["Australia", "Austria", "Denmark", "Netherlands","New Zealand", "Norway", "Sweden", "UK","USA","Japan","Poland","Finland","Italy","France","Belgium"]
var third_data = [102, 39, 81, 50, 61, 79, 81, 77, 59, 64, 56, 65, 57, 85, 50];

var third_xScale = d3.scaleBand()
                     .domain(d3.range(third_data.length))
                     .rangeRound([third_padding ,third_width])
                     .paddingInner(0.1);

var third_yScale = d3.scaleLinear()
                     .domain([0, d3.max(third_data)])
                     .range([third_height - third_padding, third_padding]);

var third_xAxis = d3.axisBottom()
                    .scale(third_xScale).tickFormat(function(i) {return third_countries[i];})

var third_yAxis = d3.axisLeft()
                    .scale(third_yScale).ticks(5);

var third_svg = d3.select("#chart3")
                  .append("svg")
                  .attr("width", third_width)
                  .attr("height", third_height);

third_svg.selectAll("rect")
    .data(third_data)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
       return third_xScale(i);
    })
    .attr("y", function(d) {
       return third_height - third_padding - third_yScale(d);
    })
    .attr("width", third_xScale.bandwidth())
    .attr("height", function(d) {
       return third_yScale(d);
    })
    .attr("fill", function(d) {
       return "rgb(0, 0, " + Math.round(d * 10) + ")";
    });

//Create "Food waste per capita (kg/year)" on Y Axis
third_svg.append('text')
        .attr('x', 5)
        .attr('y', 20)
        .attr('text-anchor', 'left')
        .style('font-family', 'Helvetica')
        .style('font-size', 'small')
        .text('Food waste per capita (kg/year)');

third_svg.append("g")
         .attr("class", "axis")
         .attr("transform", "translate(" + third_padding + ",0)")
         .call(third_yAxis);



third_svg.append("g")
         .attr("class", "axis")
         .attr("transform", "translate(0,"+ (third_height - third_padding) + ")")
         .call(third_xAxis);

您可以在这张图片上看到结果，其中第一条表示接近 10 而不是 102 的值：

您能帮我知道在这种情况下如何固定轴，以便y轴上的值可以对齐吗？

谢谢！

Answer 1

Y 刻度的方向（倒置）与 SVG 的方向（倒置）相反。

可以通过切换<rect>s的y和height属性的值来解决：

third_svg.selectAll("rect")
  .data(third_data)
  .enter()
  .append("rect")
  .attr('y', d => third_yScale(d))
  .attr("height", d => third_height - third_padding - third_yScale(d))
  ...

查看它在 sn-p 中的工作：

const third_width = 1000;
const third_height = 450;
const third_padding = 30;
    
const third_countries = ["Australia", "Austria", "Denmark", "Netherlands","New Zealand", "Norway", "Sweden", "UK","USA","Japan","Poland","Finland","Italy","France","Belgium"]

const third_data = [102, 39, 81, 50, 61, 79, 81, 77, 59, 64, 56, 65, 57, 85, 50];

const third_xScale = d3.scaleBand()
  .domain(d3.range(third_data.length))
  .rangeRound([third_padding ,third_width])
  .paddingInner(0.1);

const third_yScale = d3.scaleLinear()
  .domain([0, d3.max(third_data)])
  .range([third_height - third_padding, third_padding]);
                     
const third_xAxis = d3.axisBottom()
  .scale(third_xScale).tickFormat(function(i) {return third_countries[i];})

const third_yAxis = d3.axisLeft()
  .scale(third_yScale).ticks(5);

const third_svg = d3.select("#chart3")
  .append("svg")
  .attr("width", third_width)
  .attr("height", third_height);

third_svg.selectAll("rect")
  .data(third_data)
  .enter()
  .append("rect")
  .attr("x", (d, i) => third_xScale(i))
  .attr('y', d => third_yScale(d))
  .attr("height", d => third_height - third_padding - third_yScale(d))
  .attr("width", third_xScale.bandwidth())
  .attr("fill", d => `rgb(0, 0, ${d * 2})`);

 //Create "Food waste per capita (kg/year)" on Y Axis
 third_svg.append('text')
   .attr('x', 5)
   .attr('y', 20)
   .attr('text-anchor', 'left')
   .style('font-family', 'Helvetica')
   .style('font-size', 'small')
   .text('Food waste per capita (kg/year)');

third_svg.append("g")
   .attr("class", "axis")
   .attr("transform", "translate(" + third_padding + ",0)")
   .call(third_yAxis);

third_svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0,"+ (third_height - third_padding) + ")")
  .call(third_xAxis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>
<div id="chart3" />