javascript - 仅在 d3.js 条形图的 Y 轴上维护最高和最低值

Question

我正在使用 d3.js v4 来制作条形图。我只想要最高和最低值作为条形图中的刻度

上图显示了给定数据的几个刻度。它应该只打印在 yaxis 上的 0 和 7，删除其他值。

我们如何维护每个柱上的数据值。

下面是正在使用的 d3.js 代码

    var margin = {top: 20, right: 20, bottom: 70, left: 40}



var data =[
  {
     "Type_Miss":"High",
     "Value_Miss":"5"
  },
  {
     "Type_Miss":"Medium",
     "Value_Miss":"1"
  },
  {
     "Type_Miss":"Ignore",
     "Value_Miss":"2"
  },
   {
     "Type_Miss":"High",
     "Value_Miss":"4"
  },
   {
     "Type_Miss":"High",
     "Value_Miss":"7"
  },
   {
     "Type_Miss":"High",
     "Value_Miss":"1"
  },
   {
     "Type_Miss":"High",
     "Value_Miss":"3"
  }];

    var width = 650 - margin.left - margin.right
    var height = 300 - margin.top - margin.bottom;

    var height1 = 400-margin.top - margin.bottom;

    var svg = d3.select("#bardiv").append("svg")
    .attr("width", width + margin.left + margin.right+60)
    .attr("height", height1 + margin.top + margin.bottom)
  .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")")
          .data([data]) ;


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


    var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


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



      g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
      .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" );


      g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y))
      .append("text")
      .attr("transform", "rotate(90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
       .attr("dx","0.81em")
      .attr("text-anchor", "end");



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

Answer 1

由于您只想显示最小和最大刻度，因此您可以简单地使用域作为 getter...

y.domain()

...在 tickValues 函数中设置刻度。检查这个演示:

  var margin = {
    top: 20,
    right: 20,
    bottom: 70,
    left: 40
  };

  var data = [{
    "Type_Miss": "High",
    "Value_Miss": "5"
  }, {
    "Type_Miss": "Medium",
    "Value_Miss": "1"
  }, {
    "Type_Miss": "Ignore",
    "Value_Miss": "2"
  }, {
    "Type_Miss": "High",
    "Value_Miss": "4"
  }, {
    "Type_Miss": "High",
    "Value_Miss": "7"
  }, {
    "Type_Miss": "High",
    "Value_Miss": "1"
  }, {
    "Type_Miss": "High",
    "Value_Miss": "3"
  }];

  var width = 650 - margin.left - margin.right
  var height = 300 - margin.top - margin.bottom;

  var height1 = 400 - margin.top - margin.bottom;

  var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right + 60)
    .attr("height", height1 + margin.top + margin.bottom)
    .append("g")
    .attr("transform",
      "translate(" + margin.left + "," + margin.top + ")")
    .data([data]);


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


  var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


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

  g.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", "-.55em")
    .attr("transform", "rotate(-90)");


  g.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y).tickValues(y.domain()))
    .append("text")
    .attr("transform", "rotate(90)")
    .attr("y", 6)
    .attr("dy", "0.71em")
    .attr("dx", "0.81em")
    .attr("text-anchor", "end");

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

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

作为附加信息，如果您想显示数据中的最小值和最大值(不包括零基线)，只需使用 d3.min 和 d3.max:

.tickValues([d3.min(data, d => d.Value_Miss), d3.max(data, d => d.Value_Miss)])

这是演示:

  var margin = {
    top: 20,
    right: 20,
    bottom: 70,
    left: 40
  };

  var data = [{
    "Type_Miss": "High",
    "Value_Miss": "5"
  }, {
    "Type_Miss": "Medium",
    "Value_Miss": "1"
  }, {
    "Type_Miss": "Ignore",
    "Value_Miss": "2"
  }, {
    "Type_Miss": "High",
    "Value_Miss": "4"
  }, {
    "Type_Miss": "High",
    "Value_Miss": "7"
  }, {
    "Type_Miss": "High",
    "Value_Miss": "1"
  }, {
    "Type_Miss": "High",
    "Value_Miss": "3"
  }];

  var width = 650 - margin.left - margin.right
  var height = 300 - margin.top - margin.bottom;

  var height1 = 400 - margin.top - margin.bottom;

  var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right + 60)
    .attr("height", height1 + margin.top + margin.bottom)
    .append("g")
    .attr("transform",
      "translate(" + margin.left + "," + margin.top + ")")
    .data([data]);


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


  var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


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



  g.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", "-.55em")
    .attr("transform", "rotate(-90)");


  g.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y).tickValues([d3.min(data, d=>d.Value_Miss),d3.max(data, d=>d.Value_Miss)]))
    .append("text")
    .attr("transform", "rotate(90)")
    .attr("y", 6)
    .attr("dy", "0.71em")
    .attr("dx", "0.81em")
    .attr("text-anchor", "end");

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

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