gpt4 book ai didi

javascript - 在没有 jquery 的情况下在 DOM 上运行 D3 代码

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:17:14 27 4
gpt4 key购买 nike

遵循 this 的建议所以问题/答案,我将我的 D3 代码放在 html 下方并放在执行 onload 的函数中,但是,当我在我的 MAMP 本地服务器上测试它时,D3 代码没有执行。请注意,如果我在控制台中运行 runD3code,则会出现预期的条形图,但如果我将该代码包含在 index.html 的 runD3code 函数中,则条形图不会出现。我还注意到,在 html 下方包含 D3 是库作者的做法 here .

<!DOCTYPE html>
<meta charset="utf-8">


<style type="text/css">
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>

<body onload="runD3code()">
<div class="chart">

</div>
<script src="./d3.js" charset="utf-8">
<script>
function runD3code() {
console.log("not getting called");
var data = [4, 8, 15, 16, 23, 42];
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return d * 10 + "px"; })
.text(function(d) { return d; });
}
</script>

</body>

然后,我什至尝试将其放入 document ready equivalent 中, 但 D3 代码仍然没有运行

       (function(){
var tId = setInterval(function(){if(document.readyState == "complete") onComplete()},11);
function onComplete(){
clearInterval(tId);

var data = [4, 8, 15, 16, 23, 42];
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return d * 10 + "px"; })
.text(function(d) { return d; });

};
})()

你能建议解决这个问题的方法吗?

最佳答案

问题是您的 html 文件无效。语法错误太多。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<style type="text/css">
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
</head>
<body>
<div class="chart"></div>
<script src="./d3.js" charset="utf-8"></script>
<script>
window.onload = function runD3code() {
console.log("not getting called");
var data = [4, 8, 15, 16, 23, 42];
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return d * 10 + "px"; })
.text(function(d) { return d; });
};
</script>

</body>
</html>

关于javascript - 在没有 jquery 的情况下在 DOM 上运行 D3 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24771648/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com