У меня есть график с помощью d3js только ось X не до конца рисует. Подскажите что не так и как исправить чтобы ось X рисовалась правильно до конца?
Вот код
import * as d3 from 'd3';
const data = [
{ id: 1, value: 1 },
{ id: 2, value: 15 },
{ id: 3, value: 2 },
{ id: 4, value: 20 },
{ id: 5, value: 4 },
{ id: 6, value: 8 }
];
const width = 900;
const height = 400;
const chart = d3.select('body')
.append('svg')
.attr('id', 'chart')
.attr("viewBox", [0, 0, width, height])
const margin = ({ top: 10, right: 730, bottom: 20, left: 30 });
const x = d3.scaleLinear()
.domain(data.map(d => (d.id)))
.range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)]).nice()
.range([height - margin.bottom, margin.top])
const xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
.call(g => g.select(".domain").remove())
const yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(width / 30).tickSizeOuter(0))
.call(g => g.select(".domain"))
.call(g => g.selectAll(".tick line").clone()
.attr("stroke-opacity", d => d === 0 ? null : 0.2)
.attr("x2", width - margin.left - margin.right))
.call(d3.axisLeft(y)
.tickValues(d3.ticks(...y.domain(), 20)))
const line = d3.line()
.x(d => x(d.id))
.y(d => y(d.value));
chart.append("g")
.call(yAxis);
chart.append("g")
.call(xAxis);
chart.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 2)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", line)