javascript file not working while linking with html

Question

I created a code in.js file to display bar chart and linked it to html file but it is not displaying bar chart in browser,but content in html is getting displayed.so i want the bar chart to be displayed in browser.

*****html file******
<html>
    <head>

        <link rel="stylesheet" href="index.css">
        <script src="index.js"></script>

        <script src="https://d3js.org/d3.v4.min.js"></script>


        <title>Learn d3.js</title>
    </head>
    <body>
        <!-- <h1> first heading </h1> -->
        <h1>Bar chart using D3.js</h1>
        <svg class ="bar-chart"></svg>


    </body>
</html>


*********js file*******
var dataset = [80,100,56,120,180,30,40,120,160];
var svgWidth = 500,svgHeight = 300,barPadding = 5;
var barWidth = (svgWidth/dataset.length);
var svg = d3.select('svg')
    .attr("width".svgWidth)
    .attr("height".svgHeight);
var barChart = svg.selectAll("rect")
    .data(dataset)
    .enter()   
    .append("rect")
    .attr("y", function(d) {
        return svgHeight - d
    })
    .attr("height", function(d) {
        return d;
    })
    .attr("width", barWidth - barPadding)
    .attr("transform",function (d, i) {
        var translate = [barWidth * i,0];
        return "translate("+translate +")";
    });

Answer 1

When the js file is linked from header, it is suppose to run before the html body ever existed. Just move the <script.....</script> to the last, just before </body> will do the trick.

javascript file not working while linking with html

Question

1 answers

solution1
0 2019-11-20 07:01:37

javascript file not working while linking with html

Question

1 answers

solution1 0 2019-11-20 07:01:37

solution1
0 2019-11-20 07:01:37