javascript - 如何为每个刻度绘制网格线？

Question

我的 x 轴有 10 个刻度。我想为每个刻度画一条网格线。我的尝试在这里:

const dataSet = [
  0,
  10,
  20,
  30,
  40,
  50,
  60,
  70,
  80,
  90,
  100
];

const w = 1200;
const h = 250;
const padding = 20;
const paddingYaxis = 50;

const xScale = d3.scaleLinear()
               .domain([0,100])
               .range([paddingYaxis, w - 10]);

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

svg.selectAll('line')
  .data(dataSet)
  .enter()   
  .append('line')
  .attr("x1", function(d) { return xScale(d); })
  .attr("y1", padding)
  .attr("x2", function(d) { return xScale(d); })
  .attr("y2", h - padding)
  .attr("stroke-width", 1)
  .attr("stroke", "#999");     

const xAxis = d3.axisBottom(xScale)
                .tickSizeOuter(-10)
                .tickPadding(5);

svg.append('g')
  .attr('transform', 'translate(0,' + (h - padding) + ')')
  .call(xAxis);

现场演示 is here.

但是我的代码有问题。当标签数量增加时 - 我将不得不为新行编写代码。这是非常糟糕的做法。

我需要循环来绘制所有可能的网格线。请帮助我。

PS:我使用D3 5.7.0

Answer 1

可以使用tickSizeInner来绘制网格线。轴的方法。您不需要像在代码中那样专门绘制网格线。

示例:

d3.axisBottom(xScale).tickSizeInner(-height)

在您的情况下，要包含填充，上面的内容将更改为:

d3.axisBottom(xScale).tickSizeInner(-(h-padding))

片段:

const dataSet = [
  0,
  10,
  20,
  30,
  40,
  50,
  60,
  70,
  80,
  90,
  100
];

const w = 1200;
const h = 250;
const padding = 20;
const paddingYaxis = 50;

const xScale = d3.scaleLinear()
               .domain([0,100])
               .range([paddingYaxis, w - 10]);

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

const xAxis = d3.axisBottom(xScale)
                .tickSizeInner(-(h-padding))
                .tickPadding(5);

svg.append('g')
  .attr('transform', 'translate(0,' + (h - padding) + ')')
  .call(xAxis);
  //.selectAll('.tick line').attr('y1', 3);

svg {
	width: 100%;

}

.tick line {
  stroke: #CCC;
}
.cost-square-wrap {
  width: 100%;
}

<script src="https://d3js.org/d3.v5.min.js"></script>


    <div class="cost-square-wrap">
			<svg id="costSquareGraph" viewbox="0 0 1200 250"></svg> 
		</div>

这只会更改刻度线的 y2，当然它也会匹配刻度数。

假设我通过 .ticks(20) 更改了刻度数 = 20。片段:

const dataSet = [
  0,
  10,
  20,
  30,
  40,
  50,
  60,
  70,
  80,
  90,
  100
];

const w = 1200;
const h = 250;
const padding = 20;
const paddingYaxis = 50;

const xScale = d3.scaleLinear()
               .domain([0,100])
               .range([paddingYaxis, w - 10]);

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

const xAxis = d3.axisBottom(xScale)
                .tickSizeInner(-(h-padding))
                .tickPadding(5).ticks(20);

svg.append('g')
  .attr('transform', 'translate(0,' + (h - padding) + ')')
  .call(xAxis);
  //.selectAll('.tick line').attr('y1', 3);

svg {
	width: 100%;

}

.tick line {
  stroke: #CCC;
}
.cost-square-wrap {
  width: 100%;
}

<script src="https://d3js.org/d3.v5.min.js"></script>


    <div class="cost-square-wrap">
			<svg id="costSquareGraph" viewbox="0 0 1200 250"></svg> 
		</div>

还添加了一些 CSS:

.tick line {
   stroke: #CCC;
}

希望这有帮助。