Question

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

上图显示了给定数据的几个刻度。它应该只在y轴上打印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

由于您只想显示最小和最大刻度，您只需将域用作吸气剂...

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>

Answer 2

执行此操作的一种方法是在y轴上使用.tickValues()来明确定义刻度值。目前，我已直接添加了0和7，但您可以根据您的数据计算出外部数据。

当我们追加y-axis：

时，我们可以像下面这样做

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

JSFiddle - https://jsfiddle.net/fbus9062/

仅在d3.js条形图的Y轴上保持最高和最低值

2 个答案: