Open smpa01 opened 2 years ago
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
I have created a chart using d3 and the code is following
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