简体   繁体   中英

d3.js: axisBottom is appearing at the top instead

I'm trying to add an X-axis to the bottom of my D3 (v5) generated graph, as below. However, the X-axis appears at the top, even though I am calling axisBottom() . Is there a mistake that I'm making somewhere?

results = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  y: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
  y1: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
}

const W = 1000,
      H = 620,
      margin = {
        top: 20,
        right: 80,
        bottom: 30,
        left: 50,
      };

const width = W - margin.left - margin.right,
      height = H - margin.top - margin.bottom;

let scaleX = d3.scaleLinear()
  .domain([results.x[0], results.x[results.x.length-1]]) // x is produced by numpy.linspace
  .range([0, width]);

let ymax = Object.keys(results)
  .filter(k => k !== 'x')
  .map(k => d3.max(results[k].y))
  .reduce((x, y) => Math.max(x, y), -Infinity);

let scaleY = d3.scaleLinear()
  .domain([0, ymax])
  .range([height, 0]);

let xAxis = d3.axisBottom(scaleX);

let svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

svg.append("g")
  .attr("class", "x axis")
  .call(xAxis);

I've attached an image for reference: axis appears right at the top of the SVG element; I expected it to appear at the bottom instead. 轴显示在SVG元素的顶部;我希望它会出现在底部。

According to the documentation d3.axisBottom

Constructs a new bottom-oriented axis generator for the given scale, with empty tick arguments, a tick size of 6 and padding of 3. In this orientation, ticks are drawn below the horizontal domain path.

So, you still have to translate the axis.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM