D3.JS Y轴标签问题

Question

首先，我是D3.Js的新手。 过去一周左右，我一直在研究D3.JS问题，尤其是制作带有Y轴标签的图形。 但是，我无法获得所需的图形。 快到了，但是倒挂了，或者我的数据出了错。 现在，在显示所有代码之前，我将简要展示一些代码和主要问题的图像。 我花了很多时间看其他有类似问题的Stack Overflow帖子，我做了这些帖子上的内容，但仍然有同样的问题。

例如，我认为该帖子将提供解决方案： Y轴反转D3

数据如下：

[0,20,3,8]（实际上是一个对象数组，但是我认为这可能就是所需要的。

因此，首先，当yScale如下所示时：

  var yScale = d3.scaleLinear() 
             .domain([0, maxPound]) //Value of maxpound is 20
             .range([0, 350]);

条形图如下所示：

可以看到，Y图表的顶部从零开始，底部从20开始，起初我认为这是将域中的值翻转到此的简单解决方案：

     var yScale = d3.scaleLinear() 
             .domain([0, maxPound]) //Value of maxpound is 20
             .range([0, 350]);

我得到这张图片：

在第二个图像中，y轴是右20，位于顶部。 但是图表是错误的。 现在，0将返回350像素的值，即SVG元素的高度。 那就是20应该返回的值！ 如果尝试切换图像范围值，则会遇到同样的问题！

现在的代码：

  var w = 350;
  var h = 350;
  var barPadding = 1;
  var margin = {top: 5, right: 200, bottom: 70, left: 25}

  var maxPound = d3.max(poundDataArray, 
     function(d) {return parseInt(d.Pounds)}
  );

  //Y-Axis Code
  var yScale = d3.scaleLinear()
                 .domain([maxPound, 0])
                 .range([0, h]);

  var yAxis = d3.axisLeft()
                .scale(yScale)
                .ticks(5);


  //Creating SVG element 
  var svg = d3.select(".pounds")
              .append('svg')
              .attr("width", w)
              .attr('height', h)
              .append("g")
                 .attr("transform", "translate(" + margin.left + "," + 
     margin.top + ")");

    svg.selectAll("rect")
       .data(poundDataArray)
       .enter()
       .append("rect")
       .attr('x',  function(d, i){
            return i * (w / poundDataArray.length);
         })
       .attr('y', function(d) {
            return 350 - yScale(d.Pounds);
        })
       .attr('width', (w / 4) - 25)
       .attr('height', function(d){
           return yScale(d.Pounds);
        })
       .attr('fill', 'steelblue');



   //Create Y axis
   svg.append("g")
      .attr("class", "axis")
      .call(yAxis);

感谢您的任何帮助！ 我认为错误可能出在y或height值上，并花了很多时间在那里弄乱了结果。

Answer 1

这不是一个D3的问题，而是一个SVG功能：在SVG，原点（0,0）是在左上角 ，而不是左下角，作为普通的笛卡尔平面。 这就是为什么使用[0, h]作为范围会使轴看起来像是反转的 ...实际上，它不是反转的：这是SVG中正确的方向。 顺便说一句，HTML5 Canvas具有相同的坐标系，并且使用Canvas也会遇到相同的问题。

因此，您必须翻转range而不是domain：

var yScale = d3.scaleLinear()
    .domain([0, maxPound])
    .range([h, 0]);//the range goes from the bottom to the top now

或者，在您的情况下，使用边距：

var yScale = d3.scaleLinear()
    .domain([0, maxPound])
    .range([h - margin.bottom, margin.top]);

除此之外，y位置和高度的数学运算是错误的。 它应该是：

.attr('y', function(d) {
    return yScale(d.Pounds);
})
.attr('height', function(d) {
    return h - margin.bottom - yScale(d.Pounds);
})

另外，请注意，请勿硬编码x的位置和宽度。 请改用带刻度。

这是您所做的更改的代码：

 var poundDataArray = [{ Pounds: 10 }, { Pounds: 20 }, { Pounds: 5 }, { Pounds: 8 }, { Pounds: 14 }, { Pounds: 1 }, { Pounds: 12 }]; var w = 350; var h = 350; var barPadding = 1; var margin = { top: 5, right: 20, bottom: 70, left: 25 } var maxPound = d3.max(poundDataArray, function(d) { return parseInt(d.Pounds) } ); //Y-Axis Code var yScale = d3.scaleLinear() .domain([0, maxPound]) .range([h - margin.bottom, margin.top]); var xScale = d3.scaleBand() .domain(d3.range(poundDataArray.length)) .range([margin.left, w - margin.right]) .padding(.2); var yAxis = d3.axisLeft() .scale(yScale) .ticks(5); //Creating SVG element var svg = d3.select("body") .append('svg') .attr("width", w) .attr('height', h) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.selectAll("rect") .data(poundDataArray) .enter() .append("rect") .attr('x', function(d, i) { return xScale(i); }) .attr('y', function(d) { return yScale(d.Pounds); }) .attr('width', xScale.bandwidth()) .attr('height', function(d) { return h - margin.bottom - yScale(d.Pounds); }) .attr('fill', 'steelblue'); //Create Y axis svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + margin.left + ",0)") .call(yAxis); 

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