Почему я не могу отобразить график d3?

Я не могу отобразить график D3 на веб-странице.

Я могу отобразить сюжет, когда выбираю <body>. Однако я не могу отобразить график, когда выбираю, скажем, <div>.

Ниже приведены мои настройки:

plot.html

<!DOCTYPE html>
<html>
    <head>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    
      <title>Protein Structure Analyzer</title>
      <script type = "text/javascript" src = "../static/jquery/jquery-3.6.3.js"></script>
      <script type = "text/javascript" src = "../static/d3/d3.js"></script>
      <script type = "text/javascript" src = "../static/d3/d3.min.js"></script>
    </head>
    <body>
    <script type = "text/javascript">
    // set the dimensions and margins of the graph
    var margin = {top: 10, right: 40, bottom: 30, left: 30},
        width = 450 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom;
    
    // append the svg object to the body of the page
    var svG = d3.select("#plot-div")
      .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");
    
    // Create data
    var data = [ {x:10, y:20}, {x:40, y:90}, {x:80, y:50} ]
    
    // X scale and Axis
    var x = d3.scaleLinear()
        .domain([0, 100])         // This is the min and the max of the data: 0 to 100 if percentages
        .range([0, width]);       // This is the corresponding value I want in Pixel
    svG
      .append('g')
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
    
    // X scale and Axis
    var y = d3.scaleLinear()
        .domain([0, 100])         // This is the min and the max of the data: 0 to 100 if percentages
        .range([height, 0]);       // This is the corresponding value I want in Pixel
    svG
      .append('g')
      .call(d3.axisLeft(y));
    
    // Add 3 dots for 0, 50 and 100%
    svG
      .selectAll("whatever")
      .data(data)
      .enter()
      .append("circle")
        .attr("cx", function(d){ return x(d.x) })
        .attr("cy", function(d){ return y(d.y) })
        .attr("r", 7)
    </script>
    <div id = "plot-div"></div>
    </body>
</html>

Что я делаю неправильно?

🤔 А знаете ли вы, что...
HTML5 внедрил множество новых семантических элементов, таких как <header>, <footer>, <nav> и другие.


65
1

Ответ:

Решено

DIV должен быть в документе до запуска скрипта, поэтому просто переместите DIV в начало документа:

// set the dimensions and margins of the graph
var margin = {top: 10, right: 40, bottom: 30, left: 30},
    width = 450 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svG = d3.select("#plot-div")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Create data
var data = [ {x:10, y:20}, {x:40, y:90}, {x:80, y:50} ]

// X scale and Axis
var x = d3.scaleLinear()
    .domain([0, 100])         // This is the min and the max of the data: 0 to 100 if percentages
    .range([0, width]);       // This is the corresponding value I want in Pixel
svG
  .append('g')
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

// X scale and Axis
var y = d3.scaleLinear()
    .domain([0, 100])         // This is the min and the max of the data: 0 to 100 if percentages
    .range([height, 0]);       // This is the corresponding value I want in Pixel
svG
  .append('g')
  .call(d3.axisLeft(y));

// Add 3 dots for 0, 50 and 100%
svG
  .selectAll("whatever")
  .data(data)
  .enter()
  .append("circle")
    .attr("cx", function(d){ return x(d.x) })
    .attr("cy", function(d){ return y(d.y) })
    .attr("r", 7)
<script src = "https://code.jquery.com/jquery-3.6.3.min.js" integrity = "sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU = " crossorigin = "anonymous"></script>
<script type = "text/javascript" src = "https://d3js.org/d3.v7.min.js"></script>
<div id = "plot-div"></div>