Question

我正在绘制如下的水平条形图。

我无法显示y轴最底部的刻度。如何在y轴上显示最底下的刻度？

我已经增加了svg的高度，即高度，由于该高度在增加，但刻度仍然不可见。

var data = [
  { name: "0-18", value: 0.07507 },
  { name: "19-30", value: 0.01492 },
  { name: "31-50", value: 0.02782 },
  { name: "51-70", value: 0.04253 },
];

var margin = { left: 100, top: 10, right: 10, bottom: 100 };
var width = 600 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;

var svg = d3
  .select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var x = d3
  .scaleLinear()
  .domain([0, d3.max(data, (d) => d.value)])
  .range([margin.left, width]);

var y = d3
  .scaleBand()
  .domain(d3.range(data.length))
  .rangeRound([margin.top, height])
  .padding(0.2);

svg
  .append("g")
  .attr("class", "y-axis")
  .attr("transform", `translate(${margin.left}, 0)`)
  .call(
    d3
      .axisLeft(y)
      .tickFormat((i) => data[i].name)
      .tickSizeOuter(10)
  );

svg
  .append("g")
  .attr("fill", "steelblue")
  .selectAll("rect")
  .data(data)
  .join("rect")
  .attr("x", x(0))
  .attr("y", (d, i) => y(i))
  .attr("width", (d) => x(d.value) - x(0))
  .attr("height", y.bandwidth());

svg
  .append("g")
  .attr("fill", "white")
  .attr("text-anchor", "end")
  .attr("font-family", "sans-serif")
  .attr("font-size", 12)
  .selectAll("text")
  .data(data)
  .join("text")
  .attr("x", (d) => x(d.value) - 4)
  .attr("y", (d, i) => y(i) + y.bandwidth() / 2)
  .attr("dy", "0.35em")
  .text((d) => d3.format(".0%")(d.value));

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

Answer 1

在rangeRound定义中将margin.top减去height是解决问题的一种方法。

这是必要的，因为SVG的创建高度已扣除了边距值。

var y = d3
  .scaleBand()
  .domain(d3.range(data.length))
  .rangeRound([margin.top, height - margin.top])

下面的摘要中的演示。

var data = [
  { name: "0-18", value: 0.07507 },
  { name: "19-30", value: 0.01492 },
  { name: "31-50", value: 0.02782 },
  { name: "51-70", value: 0.04253 },
];

var margin = { left: 100, top: 10, right: 10, bottom: 100 };
var width = 600 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;

var svg = d3
  .select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var x = d3
  .scaleLinear()
  .domain([0, d3.max(data, (d) => d.value)])
  .range([margin.left, width]);

var y = d3
  .scaleBand()
  .domain(d3.range(data.length))
  .rangeRound([margin.top, height - margin.top])
  .padding(0.2);

svg
  .append("g")
  .attr("class", "y-axis")
  .attr("transform", `translate(${margin.left}, 0)`)
  .call(
    d3
      .axisLeft(y)
      .tickFormat((i) => data[i].name)
      .tickSizeOuter(10)
  );

svg
  .append("g")
  .attr("fill", "steelblue")
  .selectAll("rect")
  .data(data)
  .join("rect")
  .attr("x", x(0))
  .attr("y", (d, i) => y(i))
  .attr("width", (d) => x(d.value) - x(0))
  .attr("height", y.bandwidth());

svg
  .append("g")
  .attr("fill", "white")
  .attr("text-anchor", "end")
  .attr("font-family", "sans-serif")
  .attr("font-size", 12)
  .selectAll("text")
  .data(data)
  .join("text")
  .attr("x", (d) => x(d.value) - 4)
  .attr("y", (d, i) => y(i) + y.bandwidth() / 2)
  .attr("dy", "0.35em")
  .text((d) => d3.format(".0%")(d.value));

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

Answer 2

只需将y的{{1}}第二个值修改为：

.rangeRound([margin.top, height - margin.top ])

要了解有关保证金惯例的更多信息，请在可观察到的保证金惯例上查看此article，这是一个有效的代码段：

var data = [
  { name: "0-18", value: 0.07507 },
  { name: "19-30", value: 0.01492 },
  { name: "31-50", value: 0.02782 },
  { name: "51-70", value: 0.04253 },
];

var margin = { left: 100, top: 10, right: 10, bottom: 100 };
var width = 600 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;

var svg = d3
  .select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var x = d3
  .scaleLinear()
  .domain([0, d3.max(data, (d) => d.value)])
  .range([margin.left, width]);

var y = d3
  .scaleBand()
  .domain(d3.range(data.length))
  .rangeRound([margin.top, height - margin.top ])
  .padding(0.2);

svg
  .append("g")
  .attr("class", "y-axis")
  .attr("transform", `translate(${margin.left}, 0)`)
  .call(
    d3
      .axisLeft(y)
      .tickFormat((i) => data[i].name)
      .tickSizeOuter(10)
  );

svg
  .append("g")
  .attr("fill", "steelblue")
  .selectAll("rect")
  .data(data)
  .join("rect")
  .attr("x", x(0))
  .attr("y", (d, i) => y(i))
  .attr("width", (d) => x(d.value) - x(0))
  .attr("height", y.bandwidth());

svg
  .append("g")
  .attr("fill", "white")
  .attr("text-anchor", "end")
  .attr("font-family", "sans-serif")
  .attr("font-size", 12)
  .selectAll("text")
  .data(data)
  .join("text")
  .attr("x", (d) => x(d.value) - 4)
  .attr("y", (d, i) => y(i) + y.bandwidth() / 2)
  .attr("dy", "0.35em")
  .text((d) => d3.format(".0%")(d.value));

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

在y轴上显示丢失的刻度线

2 个答案: