Index.html does not display the page when opened outside VScode
Question
I am very new to web development, so, if the questioned is very stupid, guide me appropriately and i will delete the page.
I am trying to create a map with d3.js and show the name on the region as tool-tip as the mouse moves over the map.
I have an index.html , style.css & an main.js file to build a webpage. I only use 1 json file which has geographical data of the region (it is actually a topojson file). All these files are in the same folder.
I use VScode for coding & the code works perfectly when I use Live Server within VS code.
However, when I open the index.html file directly from file explorer the index.html is blank.
I have another project where i have the same 3 files (code is different though) & that works when i open the file in file explorer.What am I doing wrong.Please guide.
My complete code is below (except for the 'karnataka.json' file). karnataka.json can be found in this github repository folder here
let margin = {top: 10, right: 10, bottom: 10, left: 10}; let width = 960 - margin.left - margin.right; let height = 500 - margin.top - margin.bottom; let path = d3.geoPath() let svg = d3.select("svg").append("g").attr("width", width).attr("height", height); let tooltip = d3.select("div.tooltip"); let url = "karnataka.json" // let obj = JSON.parse(url); // console.log(obj.district) d3.json(url, function(error, geoData) { if (error) throw error; let geojson = topojson.feature(geoData, geoData.objects.districts); svg.selectAll("path").data(geojson.features).enter().append("path").attr("stroke","rgba(9, 92, 151)").attr("stroke-width",1).attr("fill", "white").attr("d", path ).attr("transform", "scale(1.5)").on("mouseover",function(d){ d3.select(this).attr("fill","rgba(36, 140, 183,0.3)").attr("stroke-width",1.2); return tooltip.style("hidden", false).html(d.properties.district); }).on("mousemove",function(d){ tooltip.classed("hidden", false).style("top", (d3.event.pageY) + "px").style("left", (d3.event.pageX + 10) + "px").html(d.properties.district); }).on("mouseout",function(){ d3.select(this).attr("fill","white").attr("stroke-width",1); tooltip.classed("hidden", true); }); });
svg { width: 100%; height: 100%; position: absolute; margin-left: auto; margin-right: auto; display: block; }.hidden { display: none; } div.tooltip { color: rgb(34, 34, 34); background: #fff; border-radius: 3px; box-shadow: 0px 0px 2px 0px #a6a6a6; padding: 0.2em; text-shadow: #f5f5f5 0 1px 0; opacity: 0.9; position: absolute; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style:css"> </head> <body> <svg ></svg> <div class="tooltip"></div> </body> <script src="https.//d3js.org/d3.v4.min:js"></script> <script src="https.//d3js.org/topojson.v2.min:js"></script> <script src="https.//d3js.org/d3-queue.v3.min.js"></script> <script type="text/javascript" src="data.json"></script> <script type="text/javascript" src="javascrip.js"></script> <script src="main.js"></script> </html>
2 answers
solution1
0 2021-01-02 11:25:25
the vs code live server was work as a web server
you run that code server-side any server like apache or Nginx etc so you need run on the server-side
if you running normal HTML code then mention the correct path for all the asset file like (.json and main.js )
you writing the code in react so you have to make build first then it works
solution2
0 2021-09-28 17:11:11
I had the same issue, was new to vs code. Code was working fine in live server but not outside .
So what I found out was I forgot to link the file well. You can rectify by using double dot../ before linking css, images, js, etc.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.