Question

我认为我添加的图表应该在标题 SVG工作的实现之后，但最后会显示。我已经分配了应该插入的div部分。我希望我的代码在实施SVG工作之后和功能工作之前显示我使用过的图表。

This is how it looks ------------

我正在粘贴我写的代码。

  <!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节点将作为最后一个子节点附加到主体节点，因此图形将显示在最后。

将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使其可识别。看起来您当前的课程（＆＃34; col-md-12＆＃34;）实际上就是ID。

Answer 2

您应该查看附加svg元素的位置。现在它在体内，因此被添加到身体的末端。改变它。

插入网页中的可视化数据没有正确缩进，也没有出现在所需的位置

2 个答案: