gpt4 book ai didi

javascript - d3.select 方法不起作用

转载 作者:可可西里 更新时间:2023-11-01 02:16:23 26 4
gpt4 key购买 nike

我是 datavis 和 D3 库的新手,我正在尝试按照此处的指示操作 http://mbostock.github.com/d3/tutorial/bar-1.html

当我运行代码时,我的网页上没有任何显示,谁能指出问题所在??

我认为它与 d3.select 方法有关。当我运行代码并检查它时,主体是空的,所以我假设没有创建任何东西。任何帮助将不胜感激!!!

<title>3Dtut - 1</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"> </script>

<script type="text/javascript">
var data = [4, 8, 15, 16, 23, 42];

//container for the bar chart
var chart = d3.select("body").append("div")
.attr("class", "chart");

//adding div elements to the bar chart
chart.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return d * 10 + "px"; })
.text(function(d) { return d; });
</script>


<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>
</body>
</html>

最佳答案

问题与你的<script> .. </script>位置有关在 html 文档中。

没有body元素在您的脚本执行时还存在。这意味着 d3.select("body")将是空的,没有 div.chart正在追加。

试着移动你的<script> .. </script><body> .. </body>里面部分。这将保证 body执行代码时存在元素。

关于javascript - d3.select 方法不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13142591/

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