d3.js D3 svg被未知元素堵塞

ecfdbz9o 于 2022-11-12 发布在其他

关注(0)|答案(1)|浏览(189)

我试图为heatmap创建一个矩形网格。但由于某种原因，我的矩形被一个未知元素挡住了：

我以为我不小心创建了一个矩形，但没有找到它。这个白色块是从哪里来的？
下面是一个简化的代码片段，演示了相同的问题。

<!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)

            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>

d3.js

来源：https://stackoverflow.com/questions/74365782/d3-svg-occluded-by-unknown-element

1条答案

按热度按时间

cgh8pdjw1#

我为你改变了一些东西。
1.文档类型
1.多个d3库引用
1.非合成SVG

SVG的宽度不仅应该是正方形大小，

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

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

</head>
<body>

    <div class="Q2">
    </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>

赞(0）回复(0）举报 2022-11-12

我来回答

d3.js D3 svg被未知元素堵塞

1条答案

相关问题

热门标签

最新问答