d3力向图屏幕截图

Question

我使用SVG生成了力向图。 我想用鼠标选择一个屏幕截图。以下代码是我实现的帧选择功能。 我可以选择子网的节点。我用鼠标绘制了一个矩形。我希望可以对矩形中包含的子网进行截图。

function drawSquare() {

    var box_select = svg.append("rect")
        .attr("width", 0)
        .attr("height", 0)
        .attr("fill", "rgba(33, 20, 50, 0.3")
        .attr("stroke", "#ccc")
        .attr("stroke-width", "2px")
        .attr("transform", "translate(0, 0)")
        .attr("id", "squareSelect");

    svg.on("mousedown", function() {
        var coordinate = d3.mouse(d3.select("#force_svg").select("svg")[0][0]);
        clickTime = (new Date()).getTime();
        if (d3.event.target.localName == "svg") {
            flag = true;
            box_select.attr("transform", "translate(" + coordinate[0] + "," + coordinate[1] + ")");
            startLoc = coordinate;
        }
    });

    svg.on("mousemove", function() {
        var coordinate = d3.mouse(d3.select("#force_svg").select("svg")[0][0]);
        if (d3.event.target.localName == "svg" && flag == true || d3.event.target.localName == "rect" && flag == true) {
            var width = coordinate[0] - startLoc[0];
            var height = coordinate[1] - startLoc[1];

            if (width < 0) {
                box_select.attr("transform", "translate(" + coordinate[0] + ", " + startLoc[1] + ")");
            }

            if (height < 0) {
                box_select.attr("transform", "translate(" + startLoc[0] + ", " + coordinate[1] + ")");
            }

            if (width < 0 && height < 0) {
                box_select.attr("transform", "translate(" + coordinate[0] + ", " + coordinate[1] + ")");
            }
            box_select.attr("width", Math.abs(width)).attr("height", Math.abs(height));
        }
    });

    svg.on("mouseup", function() {
        var coordinate = d3.mouse(d3.select("#force_svg").select("svg")[0][0]);
        if (flag == true) {
            flag = false;
            endLoc = coordinate;
            var leftTop = [];
            var rightBottom = [];

            if (endLoc[0] >= startLoc[0]) {
                leftTop[0] = startLoc[0];
                rightBottom[0] = endLoc[0];
            } else {
                leftTop[0] = endLoc[0];
                rightBottom[0] = startLoc[0];
            }

            if (endLoc[1] >= startLoc[1]) {
                leftTop[1] = startLoc[1];
                rightBottom[1] = endLoc[1];
            } else {
                leftTop[1] = endLoc[1];
                rightBottom[1] = startLoc[1];
            }

            var nodes2 = d3.selectAll(".node").attr("temp", function(d) {
                if (d.x < rightBottom[0] && d.x > leftTop[0] && d.y > leftTop[1] && d.y < rightBottom[1]) {
                    d3.select(this).attr("class", "node selected");
                }
            });

            box_select.attr("width", 0).attr("height", 0);
        }

        var times = (new Date()).getTime() - clickTime;
        if (times < 100 && d3.event.target.id !== "squareSelect") {
            var nodes3 = d3.selectAll(".node").attr("class", "node unselected");
        }
    });
}

Renderings show

我尝试使用html2canvas和canvg生成屏幕截图，但是我不知道如何使用鼠标来选择并保存html渲染。