我正在为我在大学做的项目学习d3.js。 我的问题是当我将一个轴附加到我的svg对象时,整个svg从浏览器中的站点消失。我也试过使用一些代码示例,例如here,但它也没有用。
这是我的代码:
<!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>
答案 0 :(得分: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>
var axisBot = d3.svg.axis();
.scale(mapScale);
你知道吗?方法链断开了,您应该删除;
问题1并不重要,因为在d3 v4中,没有d3.svg.axis
(https://github.com/d3/d3-axis)。您应该使用d3.axisBottom
/ d3.axisTop
/ d3.axisRight
/ d3.axisLeft
var xsCont = canvas.append('g')
.call('axisBot');`
你应该在这里调用方法/函数,而不是字符串,这意味着你应该删除'
。