为什么图形线偏离 Y 轴和 X 轴？

Question

我无法用简单的线条创建图表。我将把我的代码和线条如何偏离 Y 轴和 X 轴的图像放在这里。我真的不知道为什么会这样。图表：HTML：<div id="myChart"></div>JavaScript：仅使用我需要的数据调整我的 json 的功能：var reduceVendedores = vendedores.reduce(function (allSales, sales) {    if (allSales.some(function (e) {        return e.vendnm === sales.vendnm;    })) {        allSales.filter(function (e) {            return e.vendnm === sales.vendnm        })[0].Vendas_Ano += sales.Vendas_Ano;        allSales.filter(function (e) {            return e.vendnm === sales.vendnm        })[0].Vendas_Ant += sales.Vendas_Ant    } else {        allSales.push({            vendnm: sales.vendnm,            Vendas_Ano: sales.Vendas_Ano,            Vendas_Ant: sales.Vendas_Ant        })    }    return allSales;}, []);定义图表的 X 轴和 Y 轴：var margin = { top: 30, right: 30, bottom: 70, left: 60 },    width = 600 - margin.left - margin.right,    height = 600 - margin.top - margin.bottom;function getMax() {    return reduceVendedores.map(d => d.Vendas_Ano)}var svg = d3.select("#myChart")    .append("svg")    .attr("width", width)    .attr("height", height);var xscale = d3.scaleBand()    .range([0, width - 100])    .domain(reduceVendedores.map(function (d) { return d.vendnm; }))var yscale = d3.scaleLinear()    .domain([0, d3.max(getMax()) + 30000])    .range([height / 2, 0]);var x_axis = d3.axisBottom().scale(xscale);var y_axis = d3.axisLeft().scale(yscale);svg.append("g")    .attr("transform", "translate(50, 10)")    .call(y_axis);var xAxisTranslate = height / 2 + 10;svg.append("g")    .attr("transform", "translate(50, " + xAxisTranslate + ")")    .call(d3.axisBottom(xscale))    .selectAll("text")    .attr("transform", "translate(-10,0)rotate(-45)")    .style("text-anchor", "end");定义图表线：svg.append("path")    .datum(reduceVendedores)    .attr("fill", "none")    .attr("stroke", "steelblue")    .attr("stroke-width", 1.5)    .attr("d", d3.line()        .x(function (d) { return xscale(d.vendnm); })        .y(function (d) { return yscale(d.Vendas_Ano) })    )

Answer 1

你没有调整你给轴的边距：

.attr("transform", "translate(50, 10)")

尝试：

svg.append('g')       

        .attr('transform','translate(50,0)')

        .append("path")

        .datum(reduceVendedores)

        .attr("fill", "none")

        .attr("stroke", "steelblue")

        .attr("stroke-width", 1.5)

        .attr("d", d3.line()

            .x(function (d) { return xscale(d.vendnm); })

            .y(function (d) { return yscale(d.Vendas_Ano) })

        )

通常，您会在 svg 中设置边距，例如：

var svg = d3.select("#myChart")

    .append("svg")

    .attr("width", width)

    .attr("height", height)

    .append('g')

    .attr('transform','translate(' + margin.left + ',' + margin.top + ')')

但是这样做会破坏轴的对齐。