Question

我已经制作了带有x轴的条形图，但无法解决为什么我无法获得条形图和x轴上的刻度线间距完全对齐。目前，蜱位于酒吧中心的右侧。

csv文件示例：

i * xScale.bandwidth() + 5

代码：

xScale.bandwidth() - 5

我是否使用x和width以及rect xScale属性中的ListIterator litr = al.listIterator(); A B C ^ System.out.print(litr.next()); // print A and move to next A B C ^ System.out.print(litr.next()); // print B and move to next A B C ^ System.out.print(litr.next()); // print C and move to next A B C ^ System.out.print(litr.previous()); // print previous which is C and move backward A B C ^ System.out.print(litr.previous()); // print previous which is B and move backward A B C ^ System.out.print(litr.next()); // print B and move to next A B C ^ System.out.print(litr.previous()); // print previous which is B and move backward A B C ^和{{1}}做得对，或者这不是正确的做法？如果更改条形，如何更改x轴上的刻度线间距？他们都使用{{1}}所以我觉得它必须与之相关。

Answer 1

我会做出以下更改。

首先，向padding：

引入xScale

var xScale = d3.scaleBand()
  .domain(cropData.map(function(d) {
    return d.crop;
  }))
  .rangeRound([0, w])
  .padding(0.1);

这会将条形空间与bandWidth的百分比区分开来。

其次，使用xScale：

放置你的酒吧

svg.selectAll("rect")
  .data(cropData)
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
    return xScale(d.crop); //<-- place by xScale
  })
  .attr("y", function(d) {
    return yScale(d.records);
  })
  .attr("width", xScale.bandwidth()) //<-- no -5 padding takes care of breaks

可运行代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Abbie's attempt at D3</title>
  <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    svg {
      background-color: rgba(227, 227, 227, 0.97);
    }
    
    .bar {
      margin: 20px;
    }
  </style>
</head>

<body>
  <script type="text/javascript">
    var margin = {
      top: 20,
      right: 30,
      bottom: 100,
      left: 40
    };
    var w = 500 - margin.left - margin.right;
    var h = 500 - margin.top - margin.bottom;
    var barPadding = 5;
    var cropData;

    // load the csv file
    //d3.csv("crops.csv", function(error, data) {

      var data = [{
        "crop": "CASSAVA",
        "records": "350"
      }, {
        "crop": "MAIZE",
        "records": "226"
      }, {
        "crop": "TOMATOES",
        "records": "137"
      }];

      data.forEach(function(d) {
        d.records = +d.records;
      });
      cropData = data;

      var arrayLength = cropData.length;
      var yMax = d3.max(cropData, function(d) {
        return d.records;
      });

      var yScale = d3.scaleLinear()
        .domain([0, yMax])
        .range([h, 0]);

      var xScale = d3.scaleBand()
        .domain(cropData.map(function(d) {
          return d.crop;
        }))
        .rangeRound([0, w])
        .padding(0.1);

      // create the svg
      var svg = d3.select("body")
        .append("svg")
        .attr("width", w + margin.left + margin.right)
        .attr("height", h + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      // bars
      svg.selectAll("rect")
        .data(cropData)
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
          return xScale(d.crop);
        })
        .attr("y", function(d) {
          return yScale(d.records);
        })
        .attr("width", xScale.bandwidth())
        .attr("height", function(d) {
          return h - yScale(d.records);
        })
        .attr("fill", "teal")
        .attr("class", "bar");

      // x Axis
      var xAxis = d3.axisBottom(xScale);
      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + h + ")")
        .call(xAxis)
        .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", function(d) {
          return "rotate(-60)"
        });

      // y Axis
      var yAxis = d3.axisLeft(yScale);
      svg.append("g")
        .call(yAxis);
        
   // });
  </script>
</body>

d3 v4为什么我不能让我的x轴和条形排列？

1 个答案: