d3.js scaleBand() 的刻度不合适

Question

我将 scaleBand() 用于条形图的 x 轴和 y 轴。出于某种原因，条形的高度在 y 轴的刻度之间。我将不胜感激任何帮助。这是我的代码：

    var margin_ = { top: 20, right: 20, bottom: 30, left: 40 },
        width_ = 960 - margin_.left - margin_.right,
        height_ = 500 - margin_.top - margin_.bottom;

    var svg_ = d3.select("body").append("svg")
        .attr("width", width_ + margin_.left + margin_.right)
        .attr("height", height_ + margin_.top + margin_.bottom)
        .append("g")
        .attr("transform",
            "translate(" + margin_.left + "," + margin_.top + ")");


    var x = d3.scaleBand()
        .range([0, width_])
        .padding(0.2)

    var y = d3.scaleBand()
        .range([height_, 0]);


    x.domain(satisfactScaleKeyValues);
    y.domain(graphYvalues);


    svg_.selectAll(".bar")
        .data(datas)
        .enter().append("rect")
        .attr("class", "bar__")
        .attr("x", function (d) { return x(d.variable); })
        .attr("width", x.bandwidth())
        .attr("y", function (d) { return y(d.satisLevel); })
        .attr("height", function (d) { return height_ - y(d.satisLevel); });


    // add the x Axis
    svg_.append("g")
        .attr("transform", "translate(0," + height_ + ")")
        .call(d3.axisBottom(x));

    // add the y Axis
    svg_.append("g")
        .call(d3.axisLeft(y))

Answer 1

您应该使用 d3.scalePoint，它可以提供从序数域到范围内线性点的更好转换：

let datas = [{variable: 1, satisLevel: "Neutral"}]

var margin_ = { top: 20, right: 50, bottom: 30, left: 75 },
        width_ = 960 - margin_.left - margin_.right,
        height_ = 500 - margin_.top - margin_.bottom;

    var svg_ = d3.select("body").append("svg")
        .attr("width", width_ + margin_.left + margin_.right)
        .attr("height", height_ + margin_.top + margin_.bottom)
        
      var g = svg_.append("g")
        .attr("transform",
            "translate(" + margin_.left + "," + margin_.top + ")");


    var x = d3.scaleBand()
        .range([0, width_])
        .padding(0.2)

    var y = d3.scalePoint()
        .range([height_, 0])
        .padding(0.2)

    x.domain([1]);
    y.domain(["Not satisfied", "Neutral", "Satisfied"]);


    g.selectAll(".bar")
        .data(datas)
        .enter().append("rect")
        .attr("class", "bar__")
        .attr("x", function (d) { return x(d.variable); })
        .attr("width", x.bandwidth())
        .attr("y", function (d) { return y(d.satisLevel); })
        .attr("height", function (d) { return height_ - y(d.satisLevel); });


    // add the x Axis
    g.append("g")
        .attr("transform", "translate(0," + height_ + ")")
        .call(d3.axisBottom(x));

    // add the y Axis
    g.append("g")
        .call(d3.axisLeft(y))

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

如果您希望最低满意度的高度大于零，您可以向 scalePoint 添加填充，如示例中所示。