在 html 代码的 div 部分添加的 Javascript 代码没有显示任何内容。

Question

这是我用来可视化我试图从我正在使用的数据集中获取的条形图的代码。但它没有显示任何内容。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">



        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <link type="text/css" rel="stylesheet" href="style.css"/>
        <script type="text/javascript" src="d3/d3.js"></script>
        <script type="text/javascript" src="d3/d3.layout.js"></script>
        <script type="text/javascript" src="d3/d3.v3.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style type="text/css">
.chart {
display: block;
margin: auto;
margin-top: 0px;
}

text {
 font-size: 11px;
}

rect {
fill: none;
}

div.bar {
            display: inline-block;
            width: 20px;
            height: 75px;   /* Gets overriden by D3-assigned height below */
            background-color: teal;
            margin-right: 2px;
        }

.axis path,
        .axis line {
          fill: none;
          stroke: black;
          shape-rendering: crispEdges;
        }

        .axis text {
          font-family: sans-serif;
          font-size: 11px;
        }


</style>

</head>



<body>
    <div class="container" >
        <div class="row" >
            <div class="col-md-4 img-responsive"><img src="img/e2.png" alt="Smiley face" height="100" width="100"></div>


            <div class="col-md-4" >
            <div id="body">
              <div id="footer">
                <h3>Course Scheduler TreeMap</h3>
                <div class="hint">click or option-click to descend or ascend</div>
                <div><select>
                  <option value="size">Size</option>
                  <option value="count">Count</option>
                </select></div>
              </div>
            </div>
            </div>

             <div class="col-md-4" >
                <h1 >Plan Your Courses</h1>

            </div>

        </div>



        <div class="row">
            <div class="col-md-12">
                <h2>Implementation of SVG Work</h2>

  <script type="text/javascript"> 
   var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
            14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
            24, 18, 25, 9, 3 ];


       //Width and height
            var w = 500;
            var h = 100;
            var barPadding = 1;   // <-- New!

          /*  var dataset =[] ;
            for (var i =0; i<25; i++) {
                var newNumber = Math.round(Math.random() * 25);
                dataset.push(newNumber);
            }*/

       //Create SVG element
            var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

        // GENERATING RECTANGLES AND MAKING BAR CHART

             svg.selectAll("rect")
           .data(dataset)
           .enter()
           .append("rect")
           .attr("x", function(d, i) {
                return i * (w / dataset.length);
            })
           .attr("y", function(d) {
                return h- (d*5);
           })
           .attr("width", w / dataset.length - barPadding)
           .attr("height", function(d) {
                return d*5;
           })
           .attr("fill", function(d) {
                return "rgb(0, 0, " + (d * 10) + ")";
            });

    // APPENDIND TEXT INTO THE BAR CHART

        svg.selectAll("text")
           .data(dataset)
           .enter()
           .append("text")
           .text(function(d) {
                return d;
           })
           .attr("x", function(d, i) {
                return i * (w / dataset.length) + 3;
           })
           .attr("y", function(d) {
                return h - (d * 4) + 10;
           })
           .attr("font-family", "sans-serif")
           .attr("font-size", "11px")
           .attr("fill", "white");


    </script>

            </div>
        </div>

    </div>
</body>
</html>

------ 然而，当 html 中没有使用 div 东西并且整个 javascript 代码都写在正文中时，相同的代码仍然有效。这是运行良好的代码。

--------

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Bar Char Test</title>
            <script type="text/javascript" src="d3/d3.v3.js"></script>

            <style type="text/css">

                div.bar {
                    display: inline-block;
                    width: 20px;
                    height: 75px;   /* Gets overriden by D3-assigned height below */
                    background-color: teal;
                    margin-right: 2px;
                }

            </style>


        </head>


        <body>

            <script type="text/javascript"> 
           var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
                    14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
                    24, 18, 25, 9, 28 ];


               //Width and height
                    var w = 500;
                    var h = 120;
                    var barPadding = 1;   // <-- New!


               //Create SVG element
                    var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

                // GENERATING RECTANGLES AND MAKING BAR CHART

                     svg.selectAll("rect")
                   .data(dataset)
                   .enter()
                   .append("rect")
                   .attr("x", function(d, i) {
                        return i * (w / dataset.length);
                    })
                   .attr("y", function(d) {
                        return h- (d*5);
                   })
                   .attr("width", w / dataset.length - barPadding)
                   .attr("height", function(d) {
                        return d*5;
                   })
                   .attr("fill", function(d) {
                        return "rgb(0, 0, " + (d * 10) + ")";
                    });

            // APPENDIND TEXT INTO THE BAR CHART

                svg.selectAll("text")
                   .data(dataset)
                   .enter()
                   .append("text")
                   .text(function(d) {
                        return d;
                   })
                   .attr("x", function(d, i) {
                        return i * (w / dataset.length) + 3;
                   })
                   .attr("y", function(d) {
                        return h - (d * 4) + 10;
                   })
                   .attr("font-family", "sans-serif")
                   .attr("font-size", "11px")
                   .attr("fill", "white");


            </script>
            </body> 
            </html>

Answer 1

问题是下面的 css 规则应用于 rect 元素，它隐藏了栏，删除它应该可以正常工作

rect {
    fill: none;
}

Answer 2

我认为您使用的 "rect" 样式可以解决您的问题。尝试从 css 的样式部分删除 "rect"，因为您使用的是 SVG 中的 "rect"。

在 html 代码的 div 部分添加的 Javascript 代码没有显示任何内容。

Javascript code added in the div section of html code does not show anything.

html

javascript

css

jquery

visualization