英文:
Why am I unable to display a d3 plot?
问题
I am unable to display a D3 plot on a web-page.
I am able to display the plot when I select <body>. However, I cannot display a plot when I select a, say, <div>.
The following is my setting:
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>
What am I doing incorrectly?
英文:
I am unable to display a D3 plot on a web-page.
I am able to display the plot when I select <body>. However, I cannot display a plot when I select a, say, <div>.
The following is my setting:
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>
What am I doing incorrectly?
答案1
得分: 1
以下是翻译好的部分，代码部分不翻译：
"The DIV needs to be in the document before the script runs so just move the DIV to the top of the document:"
"DIV 必须在脚本运行之前出现在文档中，所以将 DIV 移动到文档的顶部："
"<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>"
请注意，这是原始HTML代码中的一部分，已经保留原始的HTML实体编码。
英文:
The DIV needs to be in the document before the script runs so just move the DIV to the top of the document:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// 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)
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论