0

我对 D3 很陌生，并尝试使用 Dagre-D3 将多个图表放在同一页面上。

我已经成功地让它们渲染，但存在一些问题：

  1. 我的图表大小不同，有些对于 svg 来说太大了，而有些则太小了。关于设置 svg 大小以适合每个人的任何建议？
  2. 我希望能够缩放/平移它们中的每一个，但这仅适用于最后一个图形即使我添加更多图形，它总是只有最后一个缩放。

这是一个带有 4 个图表的代码示例。他们都渲染，但不是很好：https : //codepen.io/djangomachine/pen/wvPMZQK/https: //jsfiddle.net/3xguovqj/

（以及该示例中的单个图表）

<details>  
    <summary>Title A</summary>
    <div style="padding-left: 40px;">
        <svg id="div_desig_21_18" width=1800 height=800></svg>
    </div>
</details>

<script>
    // Create a new directed graph
    var g21_18 = new dagreD3.graphlib.Graph().setGraph({});

    var states21_18 = {
        "5000": {
            description: "represents no connection state at all.",
            style: "fill: #f77"
        },
        "5020": {
            description: "represents no connection state at all.",
            style: "fill: #f77"
        },
        "5010": {
            description: "represents no connection state at all.",
        },
        "6320": {
            description: "represents no connection state at all.",
            style: "fill: #f77"
        },
    };

    // Add states to the graph, set labels, and style
    Object.keys(states21_18).forEach(function(state) {
        var value = states21_18[state];
        value.label = state;
        value.rx = value.ry = 5;
        g21_18.setNode(state, value);
    });

    // Set up the edges
    g21_18.setEdge("5000", "5020", { label: "open" });
    g21_18.setEdge("5000", "6320", { label: "open" });
    g21_18.setEdge("5020", "6320", { label: "open" });
    g21_18.setEdge("5010", "5020", { label: "open" });
    g21_18.setEdge("5010", "6320", { label: "open" });

    // Create the renderer
    var render21_18 = new dagreD3.render();

    // Set up an SVG group so that we can translate the final graph.
    var svg21_18 = d3.select("#div_desig_21_18"),
        inner = svg21_18.append("g");

    // Set up zoom support
    var zoom21_18 = d3.zoom()
        .on("zoom", function() {
        inner.attr("transform", d3.event.transform);
        });
    svg21_18.call(zoom21_18);

    // Simple function to style the tooltip for the given node.
    var styleTooltip21_18 = function(name, description) {
        return "<p class='name'>" + name + "</p><p class='description'>" + description + "</p>";
    };

    // Run the renderer. This is what draws the final graph.
    render21_18(inner, g21_18);

    inner.selectAll("g21_18.node")
    .attr("title", function(v) { return styleTooltip(v, g21_18.node(v).description) })
    .each(function(v) { $(this).tipsy({ gravity: "w", opacity: 1, html: true }); });

    // Center the graph
    var initialScale = 0.75;
    svg21_18.call(zoom21_18.transform, d3.zoomIdentity.translate((svg21_18.attr("width") - g21_18.graph().width * initialScale) / 2, 20).scale(initialScale));

    svg21_18.attr('height', g21_18.graph().height * initialScale + 40);

</script>

在此示例中，您将看到我更改了每个图形的变量名称，因为当每个图形具有相同的变量名称时事情无法正常工作。希望这是一个明智的选择，但如果我做错了，请随时纠正我。

对此的任何帮助将不胜感激。

4

0 回答 0