javascript - 基于 D3 的条形图中的轴域不正确

Question

我正在尝试制作一个简单的条形图，其中 y 轴具有波段刻度，x 轴具有线性刻度。

我面临以下问题-

1. 无法使字符串与亚西斯
2. X轴的域与数据不同步
3. 不确定矩形的宽度是否正确(可能会倒置)
4. Y 轴使用 Band 刻度而不是 Ordinal 刻度是否合适？

我会感谢任何指向错误或缺失部分的帮助。谢谢!

我在底部附上了代码和 JsFiddle 链接。

function addBarGraph() {
  var margin = {
      top: 20,
      right: 20,
      bottom: 30,
      left: 50
    },
    width = 600 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

  var x = d3.scaleLinear()
    .rangeRound([0, width]);

  var y = d3.scaleBand()
    .rangeRound([height, 0]).padding(0.1);

  var xAxis = d3.axisBottom(x);

  var yAxis = d3.axisLeft(y);

  var svg = d3.select('#barGraph').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 max = d3.max(data, function(datum) {
    return datum.distribution;
  });

  svg.append("g")
    .attr("class", "xAxis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

  svg.append("g")
    .attr("class", "yAxis")
    .call(yAxis);

  data.forEach(function(d) {
    d.distribution = +d.distribution;
  });

  y.domain(data.map(function(d) {
    return d.nv;
  }));
  x.domain([max, 0]);

  svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("y", function(d) {
      return y(d.nv);
    })
    .attr("width", function(d) {
      return width - x(d.distribution);
    })
    .attr("height", y.bandwidth());

}

function getData() {
  data = JSON.parse('[{"nv":"Channel1","distribution":60},{"nv":"channel2","distribution":30}]');
}

$(document).ready(function() {
  getData();
  addBarGraph();
});

.bar {
  fill: steelblue;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="barGraph"></span>

链接:https://jsfiddle.net/6esyv0os/

Answer 1

让我们一步一步来。

1. Unable to get the strings displayed along with the ticks on the Yaxis

那是因为您要附加 <g>设置 y 之前轴的元素域。

2. The domain of X axis is not in sync as per the data

那是因为数组中的顺序颠倒了。应该是:

x.domain([0, max]);

3. Not sure if the width of the rectangle is correct (might be getting inverted)

是的，它是倒置的。这是正确的功能:

.attr("width", function (d) {
        return x(d.distribution);
    })

4. Is it appropriate to use Band scale for the Y axis and not the Ordinal scale ?

带标度是一个序数标度。是的，这是合适的。实际上，对于条形图(不是直方图)，这是正确的预期。

这是您更新的 fiddle :https://jsfiddle.net/58fo16s9/

甚至比 fiddle 更好，这是一个 SO 片段:

function addBarGraph() {
    var margin = {
            top: 20,
            right: 20,
            bottom: 30,
            left: 60
        },
        width = 500 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

    var x = d3.scaleLinear()
        .rangeRound([0, width]);

    var y = d3.scaleBand()
        .rangeRound([height, 0]).padding(0.1);

    var xAxis = d3.axisBottom(x);

    var yAxis = d3.axisLeft(y).ticks();

    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 max = d3.max(data, function(datum) {
        return datum.distribution;
    });



    data.forEach(function(d) {
        d.distribution = +d.distribution;
    });


    y.domain(data.map(function(d) {
        return d.nv;
    }));
    x.domain([0, max]);



    svg.selectAll(".bar")
        .data(data)
        .enter().append("rect")
        .attr("fill", "steelblue")
        .attr("y", function(d) {
            return y(d.nv);
        })
        .attr("width", function(d) {
            return x(d.distribution);
        })
        .attr("height", y.bandwidth());

    svg.append("g")
        .attr("class", "xAxis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "yAxis")
        .call(yAxis);

}

function getData() {
    data = JSON.parse('[{"nv":"Channel1","distribution":60},{"nv":"Channel2","distribution":30}]');
}

getData();
addBarGraph();

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