D3.js热力图矩形被未知元素遮挡问题求助

白色遮挡块的根源是你在已有SVG元素内部嵌套了一个新的SVG，导致绘制的矩形超出了内部SVG的可视范围，外部SVG的白色背景看起来像是遮挡了矩形。

具体问题点：

• 页面初始已经存在一个class为Q2的SVG（宽700、高700）。
• 代码中执行了d3.select(".Q2").append("svg")，在原有SVG内新增了一个宽度仅为50、高度275的内部SVG。
• 你绘制的矩形x坐标是x(d.MONTH)+offsetX，其中x的范围是0到660，加上offsetX后x值远大于内部SVG的宽度50，导致矩形大部分区域落在内部SVG的可视区域之外，被外部SVG的白色背景覆盖。

修正步骤 #

直接选择已有的Q2 SVG进行操作，不要嵌套新的SVG：

1. 替换SVG选择代码：
   将原代码中：

var svg = d3.select(".Q2")
    .append("svg")
    .attr("width", squareSize)
    .attr("height", height);

改为：

var svg = d3.select(".Q2")
    .attr("width", width + offsetX) // 根据内容调整外部SVG宽度
    .attr("height", height); // 调整外部SVG高度

2. 其他代码保持不变，这样矩形就会直接绘制在外部SVG上，不会被遮挡。

修正后的完整代码 #

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Graph</title>

    <script src="https://d3js.org/d3.v4.js" charset='utf-8'></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js" charset='utf-8'></script>

    <script src="https://d3js.org/d3.v4.min.js" charset='utf-8'></script>

</head>
<body>

    <svg width="700" height="700" class="Q2">
    </svg>

    <script type='text/javascript'>

        d3.csv("https://91063e21-7b3e-460b-9992-db5d8294e143.filesusr.com/ugd/00e35d_3ff25a705bf649108058b5fd0f8a0506.csv?dn=monthStateGen.csv", DrawGrid);

        function DrawGrid(error, data) {
            
            var maxValue = 65000000;
            var squareSize = 50;
            var squareGap = 5;
            var squareBevel = 5;
            var monthNum = 12;
            var stateNum = 5;
            var offsetX = 30;
            
            var height = stateNum * (squareSize + squareGap)
            var width = monthNum * (squareSize + squareGap)
            
            // 直接选择已有SVG，不嵌套新SVG
            var svg = d3.select(".Q2")
                .attr("width", width + offsetX)
                .attr("height", height);

            var states = d3.map(data, function(d){return d.STATE;}).keys();
            var month = d3.map(data, function(d){return d.MONTH;}).keys();
            
            var x = d3.scaleBand()
                .range([ 0, width ])
                .domain(month);
                
            var y = d3.scaleBand()
                .range([ 0,  height])
                .domain(states);
                
            svg.selectAll()
                .data(data)
                .enter()
                .append("rect")
                  .attr("x", function(d) { return x(d.MONTH)+offsetX })
                  .attr("y", function(d) { return y(d.STATE) })
                  .attr("rx", 4)
                  .attr("ry", 4)
                  .attr("width", squareSize )
                  .attr("height", squareSize )
                  .attr('opacity', '0.8')
                  .style("fill", '#333' );
        }

    </script>

</body>
</html>

内容的提问来源于stack exchange，提问作者Amarth Gûl