D3 - y 轴刻度未显示

Question

D3 - y 轴刻度未显示

我正在为 D3 做基本的条形图教程，但 yAxis 的刻度线没有显示，即使线条显示了。这个问题已经被问了很多次，但我仍然没有找到适合我的具体情况的答案。这是我的代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000000;
}

.x.axis path {
  display: none;
}

.chart rect {
  fill: steelblue;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

</style>

<svg class="chart"></svg>

<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-format.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-time.v1.min.js"></script>
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
<script src="https://d3js.org/d3-scale.v1.min.js"></script>

<script>

var data = [4, 8, 15, 16, 23, 42];
var width = 960, height = 500
var barWidth = width / data.length

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d)])
  .range([height, 0])

var chart = d3.select(".chart")
  .attr('width', width)
  .attr('height', height)

chart.append("g")
  .attr("class", "y axis")
  .call(d3.axisLeft(yScale));

var groups = chart.selectAll(".bar")
    .data(data)
  .enter().append("g")
    .attr('transform', (d, i) => `translate(${i * barWidth}, 0)`)

groups.append('rect')
  .attr('y', (d) => yScale(d))
  .attr('height', (d) => height - yScale(d))
  .attr('width', barWidth - 1)

groups.append('text')
  .attr('x', barWidth / 2)
  .attr('height', (d) => height - yScale(d))
  .attr('width', barWidth - 1)
  .text(d => d)

</script>

Run Code Online (Sandbox Code Playgroud)

有趣的事实：当我使用 axisBottom 而不是 axisLeft 附加轴时，我可以看到带有刻度的轴（显然方向不正确）。我在这里先向您的帮助表示感谢！

Answer 1

Ger*_*ado 5

这里的问题是轴生成器创建一个轴，当调用（使用call）时，该轴被绘制在以下0,0位置：

无论方向如何，轴始终在原点处渲染。

因此，您需要将translate轴向右移动一点：

chart.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(30,0)")//magic number, change it at will
    .call(d3.axisLeft(yScale));

Run Code Online (Sandbox Code Playgroud)

这是演示：

chart.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(30,0)")//magic number, change it at will
    .call(d3.axisLeft(yScale));

Run Code Online (Sandbox Code Playgroud)

PS：您的代码中还有一些其他问题可以改进（在这里，我只是回答您的问题）：

您的代码缺少所有填充（左、右、上、下）；
您应该使用比例进行 x 定位
您不需要计算条形宽度，bandwidth()它会自动计算。
模板文字在 IE 上不起作用

归档时间：	8 年，10 月前
查看次数：	5781 次
最近记录：	8 年，10 月前