javascript - 为什么图形线偏离 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 + ')')

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