javascript - 如何使图表的网格与轴对齐

Question

如标题中所述，我绘制的图表的网格位于轴之外，如下面的链接所示。我正在将此扩展导入 Thingworx 以绘制图表。我的代码可能有问题，但我似乎无法弄清楚。

访问此链接以查看我现在拥有的图表: chart或访问此链接到我的 jsfiddle (更新)。

var data = [ {x: 0, y: 0}, {x: 1, y: 30}, {x: 2, y: 40},
    {x: 3, y: 60}, {x: 4, y: 70}, {x: 5, y: 90} ];

    const margin = {
        left: 20,
        right: 20,
        top: 20,
        bottom: 20 
    };

    const svg = d3.select('svg');
    svg.selectAll("*").remove();

    const innerWidth = 200 - margin.left - margin.right;
    const innerHeight = 200 - margin.top - margin.bottom;

    const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);


    // interpolator for X axis -- inner plot region
    var x = d3.scaleLinear()
        //.domain(d3.extent(data, xValue))
        //.domain([0, 5])
        .domain([0, d3.max(data, function(d){ return d.x; })])
        .range([0,innerWidth])
        .nice();

    // interpolator for Y axis -- inner plot region
    var y = d3.scaleLinear()
        //.domain(d3.extent(data, yValue))
        //.domain([0, 100])
        .domain([0, d3.max(data, function(d){ return d.y; })])
        //.range([innerHeight,0])
        //modify y-axis such that it increases top down
        .range([0,innerHeight])
        .nice();

    //for x axis
    g.append("g")
        .attr("class", "xAxis")
        .call(d3.axisBottom(x))
        //.attr("transform", "translate(0," + innerHeight + ")");

    //for y axis 
    g.append("g")
        .attr("class", "yAxis")
        .call(d3.axisLeft(y))
        .append("text").attr("transform", "rotate(-90)").attr("text-anchor", "end");

    const xAxis = d3.axisBottom()
        .scale(x)
        //.scale(xScale)
        .ticks(5)
        //.tickSizeInner(-innerHeight)
        //.tickSizeOuter(0)
        .tickPadding(15)
        .tickSize(-innerHeight)

    const yAxis = d3.axisLeft()
        .scale(y)
        //.scale(yScale)
        .ticks(5)
        //.tickSizeInner(-innerWidth)
        //.tickSizeOuter(0)
        .tickPadding(15)
        .tickSize(-innerWidth);

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    d3.selectAll("g.xAxis g.tick")
    .append("line") 
    .attr("class", "gridline")
    .attr("x1", 0) 
    .attr("y1", 0)
    .attr("x2", innerWidth)
    .attr("y2", 0);

    d3.selectAll("g.yAxis g.tick") 
    .append("line") 
    .attr("class", "gridline")
    .attr("x1", 0) 
    .attr("y1", -innerHeight)
    .attr("x2", 0)
    .attr("y2", 0)

    //xAxisG.call(xAxis);
    //yAxisG.call(yAxis);

    //the line function for path 
    var lineFunction = d3.line()
        .x(function(d) {return x(d.x); })
        .y(function(d) {return y(d.y); })
        .curve(d3.curveLinear);

    //defining the lines
    var path = g.append("path");

    //plotting lines
    path
        .attr("d", lineFunction(data))
        .attr("stroke", "blue")
        .attr("stroke-width", 2)
        .attr("fill", "none");

Answer 1

我改进了你的 fiddle :https://jsfiddle.net/y1vctdsg/1/我更改了以下部分代码:

svg.append("g")
 .attr("class", "x axis")
 .attr("transform", `translate(20,${height+margin.top})`)
 .call(xAxis);

而且我还从 axisBottom() 更改为 axisTop() 只是为了更好的可读性:

g.append("g")
 .attr("class", "xAxis")
 .call(d3.axisTop(x))