我是Java语言的新手,并且想使用D3库在线显示我的数据。
我在网上发现了许多有关从数据数组中绘制简单条形图的示例。以下示例不起作用,它仅返回空白网页:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<div class="chart"></div>
<script src="http://d3js.org/d3.v4.js"></script>
<script>
var data = [4, 8, 15, 16, 23, 42];
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, 420]);
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return x(d) + "px"; })
.text(function(d) { return d; });
</script>
这可能是源脚本(http://d3js.org/d3.v4.js)还是浏览器有问题?
任何帮助将不胜感激。
问候。
最佳答案
您在加载d3版本4库时正在调用d3版本3方法。只需更换:
d3.scale.linear()
带有:
d3.scaleLinear()
从changes docs:
...如果您不在乎模块化,则可以忽略它
更改并继续使用默认捆绑包。但是,有一个
采用ES6模块不可避免的后果:D3中的每个符号
4.0现在共享一个平面名称空间,而不是D3 3.x的嵌套名称空间。例如,d3.scale.linear现在是d3.scaleLinear ...
完整代码:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<div class="chart"></div>
<script src="http://d3js.org/d3.v4.js"></script>
<script>
var data = [4, 8, 15, 16, 23, 42];
var x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, 420]);
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) {
return x(d) + "px";
})
.text(function(d) {
return d;
});
</script>