Question

我制作垂直直方图。轴的中心位于左下角。

但是最后一根柱超出了x轴限制（点[700，400]）。我需要增加X轴。请帮助我。

我的svg元素：

const svg = d3.select('#svg');

我的轴：

xScale = d3.scaleLinear()
                    .domain([
                        d3.min(points, d => d[0]),
                        d3.max(points, d => d[0])
                    ])
                    .range([paddings.left, width - paddings.right]);

    yScale = d3.scaleLinear()
                    .domain([
                        d3.min(points, d => d[1]),
                        d3.max(points, d => d[1])
                    ])
                    .range([height - paddings.bottom, 0 + paddings.top]);


    const xAxis = d3.axisBottom(xScale);

    const yAxis = d3.axisLeft(yScale);     


    svg.append('g')
          .attr('class', 'x-axis-group')
          .attr('transform', 'translate(0,' + (height - paddings.bottom) + ')')
          .call(xAxis);

    svg.append('g')
          .attr('class', 'y-axis-group')
          .attr('transform', 'translate(' + paddings.left + ',0)')
          .call(yAxis);

我的酒吧：

svg.selectAll(null)
        .data(points)
        .enter('')
        .append('rect')
      .attr('x', d => xScale(d[0]))
      .attr('y', d => yScale(d[1]))
      .attr('width', width / points.length)
      .attr('height', d => height - yScale(d[1]) - paddings.bottom)

Answer 1

如果图表上的条形图宽为100个单位，则x的最大值应为d3.max(points => d[0]) + 100。如果将其插入刻度，您会发现图表现在覆盖了正确的范围。

xScale = d3.scaleLinear()
                .domain([
                    d3.min(points, d => d[0]),
                    d3.max(points, d => d[0]) + 100
                ])
                .range([paddings.left, width - paddings.right]);

您现在会发现在计算条的宽度时犯了一个错误：

svg.selectAll(null)
    .data(points)
    .enter('')
    .append('rect')
  .attr('x', d => xScale(d[0]))
  .attr('y', d => yScale(d[1]))
  .attr('width', width / points.length)
  .attr('height', d => height - yScale(d[1]) - paddings.bottom)

您能弄清楚为什么它们太宽吗？

如何增加轴心？

1 个答案: