我正在使用 D3.js 在 div 内绘制一些圆圈，但出于某种原因，即使指定的 Canvas 大小等于 div 的大小，也没有数据显示在 did 的底部三分之一处。
var data = d3.csv('circles.csv', function(data){
var canvas = d3.select('.cell').append("svg");
canvas.selectAll("circles")
.attr("width", 300)
.attr("height", 250)
.data(data)
.enter()
.append("circle")
.attr("cx", function(d){return (+d.x)})
.attr("cy", function(d){return (+d.y)})
.attr("r", function(d){return (+d.radius)})
.attr("fill", "green");
});
最佳答案
如果没有指定 svg 大小，我会设置一个代码片段来表示它的样子。因此，如果您的情况是这样，底部的数据点可能刚好超出 SVG 视口(viewport)区域。
var canvas = d3.select('.cell').append("svg")
// if u did not specify size
//.attr("width", 400).attr("height", 400);
canvas.selectAll("circle").data([0])
// .attr("width", 300)
// .attr("height", 250)
// .data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
return 150;
})
.attr("cy", function(d) {
return 125;
})
.attr("r", function(d) {
return 125;
})
.style("fill", "green");<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
</head>
<body>
<div class="cell" style="width:500px; height:500px;"></div>
</body>
</html>关于javascript - 为什么使用 D3.js 显示的数据看起来是 chop 的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35785873/