如何在 y 轴上移动 d3 刻度

Question

我有一个条形图看到 plunker问题是我想将 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);

Answer 1

您在 y 轴上使用范围是这样的：

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

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

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

工作代码在这里

Answer 2

对于像 v4/v5 这样的 d3 版本。

将height定义为图形/绘图高度，将max定义为 y 的最大值。

import { parseSvg } from 'd3-interpolate/src/transform/parse'

const yScale = d3
    .scaleLinear()
    .domain([0, max])
    .rangeRound([height, 0])

const yAxis = d3.axisLeft(yScale)

svg
    .append('g')
    .call(yAxis)
    .selectAll('.tick')
    .each(function(data) {
      const tick = d3.select(this)
      const { translateX, translateY } = parseSvg(tick.attr('transform'))
      tick.attr(
        'transform',
        translate(translateX, translateY + height / (2 * max))
      )
    })

Answer 3

最近我需要一些非常相似的东西，我通过选择选择中的所有文本元素并将它们的 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