Question

我目前在为图表设置网格线时遇到问题。

问题

i）x网格线未与x轴对齐

ii）y网格线未出现。

The code and output are in the

Plunker

任何人都可以指导我吗？提前谢谢。

Answer 1

i）x网格线未与x轴对齐

原因：

你这样做

.attr("transform", "translate(0," + height + ")")

应该是这样的：

.attr("transform", "translate("+margin.left + "," + (height+ margin.top) + ")")

因此您错过了左边距和边距顶部给图表，请按上图所示添加。

ii）y网格线未出现。

<强>原因：

  svg.append("g")     
      .attr("class", "grid")
      .call(ygridlines <--- this is a function
          .tickSize(-width)
          .tickFormat("")
      )

应该是

svg.append("g")     
      .attr("class", "grid")
      .attr("transform", "translate("+margin.left + "," + (margin.top) + ")")
      .call(ygridlines()
          .tickSize(-width)
          .tickFormat("")
      )

你也错过了y轴的变换。

工作代码here

x轴和y轴的网格线的D3对齐

1 个答案: