如何让D3.js Hexbin可视化完整适配SVG容器？

问题描述 #

我正尝试将D3.js的Hexbin可视化图表适配到指定的SVG元素中，但外围的六边形被容器边框切割了一半。我尝试为Hexbin缩放设置更小的宽高，但似乎没有效果。会不会是viewBox的设置有问题？能否有人帮忙解决？提前感谢。

问题原因分析 #

1. viewBox与容器尺寸不匹配：硬编码viewBox为2000x2000，但实际容器尺寸是#dash的宽高，导致缩放逻辑混乱。
2. 随机点范围错误：以容器宽高为中心生成随机点，大量点落在有效可视区域外，Hexbin会在这些区域生成六边形，自然会被切割。
3. 边距未正确应用：定义了margin但未平移SVG的g元素，Hexbin尺寸也未结合边距和六边形半径做调整，边缘六边形的部分会超出容器。

修复方案及代码 #

修改后的完整代码 #

HTML部分

<html>
<head>
    <style>
        #dash {
            width: 100%;
            height: 600px; /* 可按需设置容器尺寸 */
            border: 1px solid #ccc; /* 方便查看容器边界 */
        }
        .svg-content {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="dash" class="svg-container"></div>    
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script>
    <script>
        var rect = document.querySelector('#dash'),
            containerWidth = rect.offsetWidth,
            containerHeight = rect.offsetHeight;

        // 设置边距和六边形半径
        var margin = {top: 50, right: 30, bottom: 30, left: 60},
            hexRadius = 20;

        // 计算实际图表可用尺寸，预留六边形半径的额外空间（避免边缘被切割）
        var graphWidth = containerWidth - margin.left - margin.right - hexRadius * 2,
            graphHeight = containerHeight - margin.top - margin.bottom - hexRadius * 2;

        // 创建SVG并设置正确的viewBox和缩放规则
        var svg = d3.select("#dash")
            .append("svg")
            .attr("preserveAspectRatio", "xMinYMin meet")
            .attr("viewBox", `0 0 ${containerWidth} ${containerHeight}`)
            .classed("svg-content", true)
            .append("g")
            .attr("transform", `translate(${margin.left + hexRadius}, ${margin.top + hexRadius})`); // 平移到边距+半径的位置

        // 生成落在图表有效范围内的随机点
        var randomX = d3.randomNormal(graphWidth / 2, 80),
            randomY = d3.randomNormal(graphHeight / 2, 80);
        var points = d3.range(200).map(function() {
            return [
                Math.max(0, Math.min(graphWidth, randomX())),
                Math.max(0, Math.min(graphHeight, randomY()))
            ];
        });

        // 颜色比例尺
        var color = d3.scaleSequential(d3.interpolateLab("white", "blue")).domain([0, 20]);

        // 初始化Hexbin，使用计算后的有效尺寸
        var hexbin = d3.hexbin()
            .size([graphWidth, graphHeight])
            .radius(hexRadius);

        // 绘制六边形
        svg.append("g")
            .selectAll(".hexagon")
            .data(hexbin(points))
            .enter().append("path")
            .attr("class", "hexagon")
            .attr("d", hexbin.hexagon())
            .attr("transform", function(d) { return `translate(${d.x}, ${d.y})`; })
            .style("fill", function(d) { return color(d.length); });
    </script>
</body>
</html>

关键修改点 #

• viewBox适配容器：将viewBox设置为容器的实际宽高，配合preserveAspectRatio实现自适应缩放。
• 预留六边形空间：计算图表尺寸时额外减去hexRadius*2，确保边缘六边形的完整显示。
• 修正随机点范围：将随机点限制在图表的有效范围内，避免生成超出可视区域的点。
• 正确应用边距和平移：将SVG的g元素平移到margin.left + hexRadius和margin.top + hexRadius的位置，让所有六边形都落在容器的边距范围内。

内容的提问来源于stack exchange，提问作者Raphael B.