无法在d3.js中添加轴
Max*_* Hf 5 html javascript d3.js d3v4
我正在学习d3.js我正在大学做的一个项目.我的问题是当我将一个轴附加到我的svg对象时,整个svg从浏览器中的站点消失.我已经使用了一些类似的代码示例也试过这个,但它不工作要么.
这是我的代码:
<!DOCTYPE HTML>
<html>
<head>
<title>Data</title>
<script src="https://d3js.org/d3.v4.0.0-alpha.44.min.js"></script>
</head>
<body>
<script>
var data_1 = [23, 54, 67, 12, 4];
var data_2 = [1, 2, 3, 4, 5];
var width = 800;
var height = 800;
var mapScale = d3.scaleLinear()
.domain([0, 70])
.range([0, width - 40]);
var axisBot = d3.svg.axis();
.scale(mapScale);
var axisLft = d3.axisLeft(data_1);
var canvas = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
var xsCont = canvas.append('g')
.call('axisBot');
var lines = canvas.selectAll('rect')
.data(data_1)
.enter()
.append('rect')
.attr('width', function(d) { return mapScale(d); })
.attr('height', 20)
.attr('y', function(d, i) { return i * 100 });
</script>
</body>
</html>
Dav*_*uan 11
这是修正后的代码.
<!DOCTYPE HTML>
<html>
<head>
<title>Data</title>
<script src="https://d3js.org/d3.v4.0.0-alpha.44.min.js"></script>
</head>
<body>
<script>
var data_1 = [23, 54, 67, 12, 4];
var data_2 = [1, 2, 3, 4, 5];
var width = 800;
var height = 800;
var mapScale = d3.scaleLinear()
.domain([0, 70])
.range([0, width - 40]);
var axisBot = d3.axisBottom(mapScale);
var axisLft = d3.axisLeft(data_1);
var canvas = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
var xsCont = canvas.append('g')
.call(axisBot);
var lines = canvas.selectAll('rect')
.data(data_1)
.enter()
.append('rect')
.attr('width', function(d) { return mapScale(d); })
.attr('height', 20)
.attr('y', function(d, i) { return i * 100 });
</script>
</body>
</html>
这就是结果:
问题1
var axisBot = d3.svg.axis();
.scale(mapScale);
你看？链接方法被打破了,你应该删除;
问题2
问题1并不重要,因为在d3 v4中,没有d3.svg.axis(https://github.com/d3/d3-axis).你应该使用d3.axisBottom/ d3.axisTop/ d3.axisRight/d3.axisLeft
问题3
var xsCont = canvas.append('g')
.call('axisBot');`
你应该在这里调用方法/函数,而不是字符串,这意味着你应该删除'.