为什么图形线偏离 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')&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; .attr('transform','translate(50,0)')&nbsp; &nbsp; &nbsp; &nbsp; .append("path")&nbsp; &nbsp; &nbsp; &nbsp; .datum(reduceVendedores)&nbsp; &nbsp; &nbsp; &nbsp; .attr("fill", "none")&nbsp; &nbsp; &nbsp; &nbsp; .attr("stroke", "steelblue")&nbsp; &nbsp; &nbsp; &nbsp; .attr("stroke-width", 1.5)&nbsp; &nbsp; &nbsp; &nbsp; .attr("d", d3.line()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .x(function (d) { return xscale(d.vendnm); })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .y(function (d) { return yscale(d.Vendas_Ano) })&nbsp; &nbsp; &nbsp; &nbsp; )通常，您会在 svg 中设置边距，例如：var svg = d3.select("#myChart")&nbsp; &nbsp; .append("svg")&nbsp; &nbsp; .attr("width", width)&nbsp; &nbsp; .attr("height", height)&nbsp; &nbsp; .append('g')&nbsp; &nbsp; .attr('transform','translate(' + margin.left + ',' + margin.top + ')')但是这样做会破坏轴的对齐。