我正在为我在大学做的项目学习 d3.js。 我的问题是当我将一个轴附加到我的 svg 对象时，整个 svg 从浏览器中的站点消失。我也尝试过使用一些代码示例，例如 this ，但它也不起作用。
这是我的代码:
<!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>
最佳答案
修改后的代码如下
<!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');`
你应该在这里调用一个方法/函数，而不是一个字符串，这意味着你应该删除 '。
关于javascript - 无法在 d3.js 中添加轴，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37770337/