D3.js散点图圆圈被遮挡，如何将其置于顶层显示？

问题根源分析 #

从代码来看，导致圆圈存在但不可见的核心原因有两个：

• 未给SVG容器设置明确宽高，默认尺寸过小，元素超出可视范围
• <g>元素的transform坐标计算错误，将圆圈移到了SVG可视区域之外

修复步骤 #

1. 给SVG容器设置宽高 #

创建SVG时添加width和height属性，确保有足够区域容纳所有元素：

var csvg = d3.select("body").append("div").attr("id", "circles")
.append("svg")
.attr("width", 800) // 根据需求调整宽度
.attr("height", 400); // 根据需求调整高度

2. 移除冗余<g>元素，直接给circle设置坐标 #

原代码用<g>的translate定位再给circle设cx=1、cy=1，既冗余又容易出错。恢复注释里的坐标设置方式，去掉<g>元素：

var circles = csvg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        var date = new Date(d["Premiere"]);
        return scaleDate(date);
    })
    .attr("cy", function(d) {
        return scaleIMDB(d["IMDB Score"]);
    })
    .attr("r", 3.5)
    .style("fill",function(d) {
        if (d["IMDB Score"] > 7.5) {
            return "orange";
        } else {
            return "blue";
        }
    });

3. 若坚持使用<g>元素，修正transform计算 #

如果保留<g>做定位，需移除cy计算中的-300，并将circle的cx、cy设为0：

.attr("transform", function(d) {
    var date = new Date(d["Premiere"]);
    var cx = scaleDate(date);
    var cy = scaleIMDB(d["IMDB Score"]); // 移除-300
    return "translate(" + cx + " " + cy + ")";
})
.append("circle")
.attr("cx", 0)
.attr("cy", 0)

完整修复后代码示例 #

d3.csv('NetflixOriginals.csv').then(function(data) {
    
    var csvg = d3.select("body").append("div").attr("id", "circles")
    .append("svg")
    .attr("width", 800)
    .attr("height", 400);
    
    var circles = csvg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
            var date = new Date(d["Premiere"]);
            return scaleDate(date);
        })
        .attr("cy", function(d) {
            return scaleIMDB(d["IMDB Score"]);
        })
        .attr("r", 3.5)
        .style("fill",function(d) {
            if (d["IMDB Score"] > 7.5) {
                return "orange";
            } else {
                return "blue";
            }
        });
});

function scaleDate(date) {
    return dateScale(date);
}

function scaleIMDB(imdb) {
    return imdbScale(imdb);
}

var dateScale = d3.scaleTime()
    .domain([new Date(2015, 0, 1), new Date(2022, 0, 1)]).range([60,700]);

var imdbScale = d3.scaleLinear()
    .domain([1,10]).range([340,20]);

内容的提问来源于stack exchange，提问作者Sruthi Chatrathi