网页中插入的可视化数据未正确缩进且未出现在所需位置

Question

我认为我添加的图表应该在标题 SVG 工作的实现 之后，但它在最后是可见的。我已经分配了应该插入的 div 部分。我希望我的代码在 SVG 工作实施 之后和 功能工作 .

之前使用它的地方显示此图

------------

我粘贴我写的代码。

  <!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">
       text {
        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" >
                          <h1 ></h1>

                      </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!


                 //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 class="row">
                      <div class="col-md-12">
                          <h2>Feature Work</h2>
                     </div>
                  </div>
                  <div class="row">
                      <div class="col-md-6">
                          <img class="img-responsive"  src="http://placehold.it/555x300">
                          <h3>Appify</h3>
                          <p><a href="http://github.com">Link to project</a></p>
                      </div>
                      <div class="col-md-6">
                          <img class="img-responsive"  src="http://placehold.it/555x300">
                          <h3>Appify</h3>
                          <p><a href="http://github.com">Link to project</a></p>
                      </div>
                  </div>
              </div>
          </body>
      </html>

Answer 1

我无所谓，你把你的脚本代码放在哪里，重要的是svg节点加在哪里。如果您这样做 d3.select("body").append("svg")，svg 节点将作为最后一个 child 节点附加到 body 节点，因此图形出现在最后。

将 svg 节点定位在正确位置的一种可能性是插入专用的 container-div，如下所示：

<body>
  <div><!-- before svg --></div>
  <div id="svg-container"><!-- you want your svg here --></div>
  <div><!-- after svg --></div>
</body>

然后您可以使用 d3.select("div#svg-container").append("svg").

插入 svg 节点

因为您已经有一个带有子标题的相应 div 元素，您可以使用 id-attribute 使其易于识别。看起来您当前的类 ("col-md-12") 实际上是 ID。

Answer 2

您应该查看附加 svg 元素的位置。现在它在 body 中，所以被添加到 body 的末尾。改变它。

网页中插入的可视化数据未正确缩进且未出现在所需位置

Visualization data inserted in the webpage is not properly indented and not appearing at desired position

html

javascript

svg

visualization

d3.js