栏重叠

Question

我使用线性X和Y轴在d3中创建了条形图（这是必需的）。问题是条形图越来越重叠。 示例在给定链接的图像中
https://drive.google.com/file/d/18zdf647E1Kqa_bV4uXxzOkTAWMCuHd7r/view?usp=sharing
js代码

var svgWidth = screen.width * 0.75, svgHeight = screen.height * 0.7;
    var margin = { top: 20, right: 20, bottom: 50, left: 70 };
    var width = svgWidth - margin.left - margin.right;
    var height = svgHeight - margin.top - margin.bottom;

    var x = d3.scaleLinear().range([0, width]).nice();
    var y = d3.scaleLinear().range([height, 0]).nice();

    var svg = d3.select("#" + ID).attr("width", svgWidth).attr("height", svgHeight);
    var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    x.domain(d3.extent(data, function (d) { return d.hours; }))
    y.domain([0, 1.1*d3.max(data, function (d) { return d.jobs; })]);

    g.selectAll("rect")
        .data(data)
        .enter().append("rect")
        .attr("x", function (d) { return (x(d.hours)+1); })
        .attr("width", (width / data.length))
        .attr("y", function (d) { return y(d.jobs); })
        .attr("height", function (d) { return height - y(d.jobs); })
        .attr("fill", "steelblue")
        .attr("stroke", "blue");

    g.append("g").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(x));
    g.append("g").call(d3.axisLeft(y));

    //text label for x axis
    g.append("text").attr("transform", "translate(" + (svgWidth / 2) + " ," + (svgHeight - margin.top - 20) + ")").style("text-anchor", "middle").text("Running time in hours");

    //text label for y axis
    g.append("text").attr("transform", "rotate(-90)").attr("y", 0 - margin.left).attr("x", 0 - (height / 2)).attr("dy", "1em").style("text-anchor", "middle").text("jobs");