为什么使用 D3 显示数据.js看起来是截断的

Why is the data displayed using D3.js looks cutoff?

本文关键字：看起来 js 数据 D3 显示 为什么      更新时间：2023-09-26

我正在使用 D3.js 在div 内绘制一些圆圈，但由于某种原因，即使画布的指定大小等同于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 视口区域。

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>

相关文章：