我正在尝试使用 d3.js 制作简单的折线图，但由于我还无法理解的原因，该图并未占据整个水平空间。 SVG 元素宽度继承自父元素 <div> (200px) 但路径来自 d3.line()仅占总空间的 1/4。
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div style="width: 200px;">
<svg id="chart"></svg>
</div>
<script>
let svg = document.getElementById('chart');
let width = svg.parentElement.offsetWidth;
let height = svg.parentElement.offsetHeight;
let data = [23, 23, 42, 23, 21, 34, 45, 21, 23];
let x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, width]);
let y = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, height]);
let line = d3.line()
.x((d, i) => x(i))
.y((d, i) => y(d));
let chart = d3.select('#chart')
.attr('width', width)
.attr('height', height);
let path = chart.append('path')
.attr('d', line(data))
.attr('stroke', 'steelblue')
.attr('stroke-width', 2)
.attr('fill', 'none');
</script>
</body>
</html>
我认为这个问题与 x 轴比例函数密切相关:
let x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, width]);
但经过多次尝试，我无法弄清楚。
最佳答案
因为在线生成器中您将每个数据点的索引传递给 x 尺度...
let line = d3.line()
.x((d, i) => x(i))
//index here---^
...域中的最大值应为data.length - 1:
let x = d3.scaleLinear()
.domain([0, data.length - 1])
这里是你的代码有那个变化:
svg {
border: solid black 1px;
}<script src="https://d3js.org/d3.v4.min.js"></script>
<div style="width: 200px;">
<svg id="chart"></svg>
</div>
<script>
let svg = document.getElementById('chart');
let width = svg.parentElement.offsetWidth;
let height = svg.parentElement.offsetHeight;
let data = [23, 23, 42, 23, 21, 34, 45, 21, 23];
let x = d3.scaleLinear()
.domain([0, data.length - 1])
.range([0, width]);
let y = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, height]);
let line = d3.line()
.x((d, i) => x(i))
.y((d, i) => y(d));
let chart = d3.select('#chart')
.attr('width', width)
.attr('height', height);
let path = chart.append('path')
.attr('d', line(data))
.attr('stroke', 'steelblue')
.attr('stroke-width', 2)
.attr('fill', 'none');
</script>PS:我在 SVG 中放置了一个边框，只是为了让您看到该线现在从一个边距到另一个边距。
关于javascript - 图没有占用 d3.js 中的整个空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45057883/