Question

我需要自定义图形Y轴上的刻度。我有ff代码：

    // Add the Y Axis
    svg.append("g")
        .call(d3.axisLeft(y))
        .append("text")
          .attr("fill", "#000")
          .attr("y", 6)
          .attr("dy", "0.71em")
          .attr("dx", "-2em")
          .attr("font-size", "15px")
          .attr("text-anchor", "end")
          .text(unitOfMeasure[0]);

我不太确定如何创建图表，以便为图表生成的每个值都创建自己的刻度值？而不仅仅是0,5,10,15,20 ...

Answer 1

由于您没有指定y轴刻度的确切要求，因此很难给出准确的答案。

但是，一般的解决方案是利用d3.js axes documentation，axis.ticks()和（可选）axis.tickFormat()指定的以下2种方法。

假设我们将以下数据输入到y轴，

const yValues = [0, 5, 10, 15, 20, 25, 30, 35, 40];

首先，我们需要为您的轴生成一个比例。我们使用上面定义的数组中的最小值和最大值设置刻度域。

const yScale = d3.scaleLinear()
  .domain([d3.min(yValues), d3.max(yValues)])
  .range([0, height]);

接下来，我们设置比例并返回轴。

const yAxis = d3.axisLeft()
  .scale(yScale);

如您所见，我们没有使用axis.ticks()或axis.tickFormat()，这将导致默认的y轴格式，由您的比例尺指定。这将导致以下结果，可能与您所拥有的类似。

const margin = {
    top: 50,
    right: 50,
    bottom: 50,
    left: 50
  },
  width = 500 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

const yValues = [0, 5, 10, 15, 20, 25, 30, 35, 40];

const yScale = d3.scaleLinear()
  .domain([d3.min(yValues), d3.max(yValues)])
  .range([0, height]);

const yAxis = d3.axisLeft()
  .scale(yScale)

const svg = d3.select('body').append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr("transform", `translate(${margin.left}, ${margin.top})`);

svg.append('g')
  .attr('class', 'axis')
  .call(yAxis);

.axis path,
line {
  fill: none;
  stroke: black;
  stroke-linecap: round;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

但是，由于您希望自定义刻度线，因此我们将需要使用axis.ticks()。例如，如果要设置轴上每个刻度之间的间隔，以使其为1的倍数（1、2、3、4、5等），而不是5的倍数（5、10、15等）），您只需为axis.ticks()提供一个参数即可生成所需的刻度间隔。

const yAxis = d3.axisLeft()
  .scale(yScale)
  .ticks(d3.max(yValues) - d3.min(yValues));

如果您想更进一步，甚至可以使用axis.tickFormat()格式化刻度线。例如，如果要提供以十进制格式显示的轴，则

const yAxis = d3.axisLeft()
  .scale(yScale)
  .tickFormat(d3.format(',.1f'));

通过上面的拼接，您将看到：

const margin = {
    top: 50,
    right: 50,
    bottom: 50,
    left: 50
  },
  width = 500 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

const yValues = [0, 5, 10, 15, 20, 25, 30, 35, 40];

const yScale = d3.scaleLinear()
  .domain([d3.min(yValues), d3.max(yValues)])
  .range([0, height]);

const yAxis = d3.axisLeft()
  .scale(yScale)
  .ticks(d3.max(yValues) - d3.min(yValues))
  .tickFormat(d3.format(',.1f'))

const svg = d3.select('body').append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr("transform", `translate(${margin.left}, ${margin.top})`);

svg.append('g')
  .attr('class', 'axis')
  .call(yAxis);

.axis path,
line {
  fill: none;
  stroke: black;
  stroke-linecap: round;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Answer 2

以https://github.com/d3/d3-axis

为例

var xAxis = d3.axisBottom(x)
    .tickValues([1, 2, 3, 5, 8, 13, 21]);

有一个tickValues值可以明确定义刻度线

如何更改d3.js的默认刻度值

2 个答案: