為什么圖形線偏離 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 + ')')

但是這樣做會破壞軸的對齊。