Javascript 如何在y轴上移动d3记号

我有一个条形图，问题是我想把y轴的记号移到矩形的左中部，但它们显示在顶部和末端。我似乎无法在不破坏图表的情况下移动它们

我的代码

var info = [{
        name: "Walnuts",
        value: 546546
      }, {
        name: "Almonds",
        value: 456455
      }

    ];

    /* Set chart dimensions */
    var width = 960,
      height = 500,
      margin = {
        top: 10,
        right: 10,
        bottom: 20,
        left: 60
      };

    //subtract margins
    width = width - margin.left - margin.right;
    height = height - margin.top - margin.bottom;

    //sort data from highest to lowest
    info = info.sort(function(a, b) {
      return b.value - a.value;
    });

    //Sets the y scale from 0 to the maximum data element


    var max_n = 0;
    var category = []
    for (var d in info) {
      max_n = Math.max(info[d].value, max_n);
      category.push(info[d].name)
    }

    var dx = width / max_n;
    var dy = height / info.length;

    var y = d3.scale.ordinal()
      .domain(category)
      .range([0, height]);

    var yAxis = d3.svg.axis()
      .scale(y)
      .orient('left')

    var svg = d3.select("#chart")
      .append("svg")
      .attr("width", "100%")
      .attr("height", "100%")
      .attr('preserveAspectRatio', 'xMidYMin')
      .attr("viewBox", '0 0 ' + parseInt(width + margin.left + margin.right) + ' ' + parseInt(height + margin.top + margin.bottom))
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.selectAll(".bar")
      .data(info)
      .enter()
      .append("rect")
      .attr("class", function(d, i) {
        return "bar" + d.name;
      })
      .attr("x", function(d, i) {
        return 0;
      })
      .attr("y", function(d, i) {
        return dy * i;
      })
      .attr("width", function(d, i) {
        return dx * d.value
      })
      .attr("height", dy)
      .attr("fill", function(d, i) {
        if (d.name == 'Walnuts') {
          return 'red'
        } else {
          return 'green'
        }
      });

    var y_xis = svg.append('g')
      .attr('id', 'yaxis')
      .call(yAxis);

---

您在y轴上使用的范围如下所示：

var y = d3.scale.ordinal()
      .domain(category)
      .range([0, height]);

您应该使用“rangeRoundBands”，因为y比例是有序的

   var y =   d3.scale.ordinal()
                        .domain(category)
                .rangeRoundBands([0, height], .1);

---

d3版本（如v4/v5）的工作代码

将

height

定义为图形/绘图高度，

max

定义为y的最大值

从'd3 interpolate/src/transform/parse'导入{parseSvg}
常数yScale=d3
.scaleLinear（）
.domain（[0，最大值]）
.rangeRound（[高度，0]）
常数yAxis=d3.轴左（yScale）
svg
.append（'g'）
.呼叫（yAxis）
.selectAll（“.tick”）
.每个功能（数据）{
常量刻度=d3。选择（此）
const{translateX，translateY}=parseSvg（tick.attr（'transform'））
滴答声(
“转换”，
平移（translateX、translateY+高度/（2*最大值））
)
})

最近，我需要一些非常类似的东西，我通过一个调用解决了这个问题，在选择中选择所有文本元素，并将它们的dy向上移动。我将以OP的代码为例：

   var y_xis = svg.append('g')
                      .attr('id','yaxis')
                      .call(yAxis)
                      .call(selection => selection
                          .selectAll('text')
                          .attr('dy', '-110') // this moves the text labels upwards
                          .attr('x', '110')); // this does the same job but horizontally