d3 svg occluded by unknown element-CodePudding

I was trying to make a grid of rectangles for a

I thought I accidentally created a rectangle but failed to find it. Where does this white block come from?

Below is a simplified code snippet that demonstrates the same issue.

<!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" >
    </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)
            
            var svg = d3.select(".Q2")
                .append("svg")
                .attr("width", squareSize)
                .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>

CodePudding user response：

I've been changing a few things for you.

doctype
multiple d3 lib referencing
non-composing svg
the width of the svg, which should not only be the square size

<!DOCTYPE html>
<html>
<head>
    <title>Graph</title>

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

    <div >
    </div>

    <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 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)
            
            var svg = d3.select(".Q2")
                .append("svg")
                .attr("width", width   (2 * 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>