Chart is not rendering correctly

Question

Chart is not rendering correctly

smpa01 opened this issue 2 years ago · comments

I have created a chart using d3 and the code is following

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>

<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>

<body>   
  
<script>
const tbl = [{ "Month": 1, "Value": 14841 }, { "Month": 2, "Value": 24467 }, { "Month": 3, "Value": 78423 }, { "Month": 4, "Value": 60213 }, { "Month": 5, "Value": 87257 }, { "Month": 6, "Value": 21543 }, { "Month": 7, "Value": 21373 }, { "Month": 8, "Value": 87363 }, { "Month": 9, "Value": 50378 }, { "Month": 10, "Value": 29714 }, { "Month": 11, "Value": 20171 }, { "Month": 12, "Value": 70059 }]

const width = 1280;
const height = 720;

//*-------1. GLOBAL DIMENSION----------*//    
const glblDim = {
    height: height,
    width: width,
    margin: {
        top: 20,
        right: 20,
        bottom: 30,
        left: 50
    }
}
glblDim.boundedWidth = glblDim.width - glblDim.margin.right - glblDim.margin.left;
glblDim.boundedHeight = glblDim.height - glblDim.margin.top - glblDim.margin.bottom;

//namespace
const svgns = 'http://www.w3.org/2000/svg'

//*-------2. DRAW CHART STRUCTURE (SVG HEIGHT,WIDTH, VBOX ETC)----------*//   
const svg = d3.select('body')
    .append('svg')
    .attr('xmlns', svgns)
    .attr('viewBox', `0 0 ${width} ${height}`)


const bound = svg.append('g').attr('class', 'bound')
    .style('transform', `translate(${glblDim.margin.left}px, ${glblDim.margin.top}px)`)


//*--------------------------3. SCALE----------------------------------*//  
//generate range X
const rangeX = d3.scaleLinear().range([0, glblDim.boundedWidth]);

//generate scale first X 
var scaleX = rangeX
    .domain(d3.extent(tbl, d => d.Month))

//generate rangeY
const rangeY = d3.scaleLinear().range([glblDim.boundedHeight, 0]);

//generate scale first Y
var scaleY = rangeY
    .domain(d3.extent(tbl, d => d.Value))

//-----------------4.AXES----------------------------------------------//     
//generate x Axis
bound.append('g')
    .call(d3.axisLeft(scaleY))
    .attr('class', 'YAxis')
    .call(a => a.selectAll(".tick")
        .remove())

//generate y Axis 
bound.append('g')
    .call(d3.axisBottom(scaleX))
    .attr('class', 'XAxis')
    .call(a => a.selectAll(".tick")
        .remove())
    .style('transform', `translateY(${glblDim.boundedHeight}px)`)

//-----------------4.DRAW DATA DRIVEN PATH---------------------------//    
//construct line generator
const lineGenerator = d3.line()
    .x(d => scaleX(d.Month))
    .y(d => scaleY(d.Value));

//run the generator
const line = lineGenerator(tbl); //---------

//create path
bound.append('g')
    .classed('lines', true)
    .append('path')
    .classed(`chartLine`, true)
    .data(tbl)
    .attr('fill', 'none')
    .attr('stroke', 'steelblue')
    //.attr('stroke-width', 1.5)
    .attr('d', line);
</script>

</body>

</html>

When I view this chart using live server, it displays as if the chart is not starting from the axis corner.

Through Live Server

However, the same chart is rendering correctly in the browser

Through Chrome