Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Chart is not rendering correctly #87

Open
smpa01 opened this issue May 2, 2022 · 0 comments
Open

Chart is not rendering correctly #87

smpa01 opened this issue May 2, 2022 · 0 comments

Comments

@smpa01
Copy link

smpa01 commented May 2, 2022 •
edited
Loading

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
image

However, the same chart is rendering correctly in the browser

Through Chrome
image
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@smpa01