使用d3绘制没有标签和轴的网格

Question

我想使用D3创建垂直网格。

我知道我可以使用d3轴方法（例如axisBottom，axisLeft，...）并设置tickSize来管理网格线的大小，但是轴生成器不仅创建线，而且还创建轴和标签，我不需要它们。

例如，这是我可以使用axisBottom绘制的内容：

const container = d3.select('svg')
container.append('g').attr('class', 'vertical-grid')

const height = 100
const numberOfTicks = 5

const xScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, 200])

const xGridGenerator = d3.axisBottom(xScale)
  .tickSize(height)
  .ticks(numberOfTicks)

container
  .select('.vertical-grid')
  .attr('transform', `translate(${0}, ${0})`)
  .call(xGridGenerator)

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

这是我想画的：

我只对红线和蓝线感兴趣，没有标签，没有轴。

我有g容器，两个刻度和刻度数。

我该怎么做？

老实说我不知道​​如何开始

Answer 1

您有一个好的开始。一种简单的自定义方法是在添加轴元素后对其进行修改（标签，线条颜色等）。例如：

xAxis.selectAll('text').remove()
xAxis.selectAll('line').attr('stroke', 'blue')

这是一个完整的示例，可呈现您想要的版本（尽管宽度/高度略有不同，因为您希望有一些余量）：]]

const height = 200
const width = 200
const margin = { top: 10, bottom: 10, left: 10, right: 10 }
const container = d3.select('svg')
    .attr('height', height)
    .attr('width', width)
    .append('g')
    .attr('transform', `translate(${margin.left},${margin.top})`)
container.append('g').attr('class', 'vertical-grid')
container.append('g').attr('class', 'horizontal-grid')

const numberOfTicks = { x: 8, y: 4 }

const xScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, width - margin.left - margin.right ])

const xGridGenerator = d3.axisBottom(xScale)
  .tickSize(height - margin.top - margin.bottom)
  .ticks(numberOfTicks.x)

const xAxis = container
  .select('.vertical-grid')
  .attr('transform', `translate(${0}, ${0})`)
  .call(xGridGenerator)

const yScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, height - margin.top - margin.bottom ])

const yGridGenerator = d3.axisRight(yScale)
  .tickSize(width - margin.left - margin.right)
  .ticks(numberOfTicks.y)

const yAxis = container
  .select('.horizontal-grid')
  .attr('transform', `translate(${0}, ${0})`)
  .call(yGridGenerator)

// Customize
xAxis.selectAll('text').remove()
xAxis.selectAll('line').attr('stroke', 'blue')

yAxis.selectAll('text').remove()
yAxis.selectAll('line').attr('stroke', 'red')
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="app">
  <svg></svg>
</div>