Question

我正在尝试制作可以动态更改宽度的图例，以便应用PC和智能手机。

需求如下：

将图例固定在左边缘。
设置每个图例的空间根据浏览器的宽度。

它将通过iframe实现为主要html。

我首先得到了浏览器的宽度。根据“ div宽度100％”计算。并且计算了每个图例的空间。

但是，这是一个意外的表达。代码如下：

<html>
<head>
    <meta charset="utf-8">
    <style>
    #legend {
        position: absolute;
        width: 100%;
        margin-left: 0px;

        vertical-align: top;
        overflow: visible;
        /*border: 2px solid #ff0000;*/
    }

    .svg-content {
        position: relative;
        width: 100%;
         margin-right: auto;
         margin-left: 0px;
    }

</style>
</head>

<body style="overflow: visible;">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
    var legendVals = [];

    var offset;
    var width;
    var height = 30;
    var svg;
    var legend;
    let space; 

    function makeLegend() {

        width = document.getElementById("legend").clientWidth;
        console.log("Width" + width)
        legendVals=["aaaaa", "bbbbb", "ccccc", "ddddd", "eeeee"];
        space = width / legendVals.length;
        console.log(space);

        legend = d3.select("#legend")
            .append("svg")
            .attr("id","legendsvg")
            .attr("width", width)
            .attr("height", height)
            .attr("viwBox", "0 0 " + width + " " + height + "")
            .selectAll('g')
            .data(legendVals)
            .enter();

        legend.append('rect') //square
            .attr("x", function(d, i) { return 5+i * space; })
            .attr("y", 10)
            .attr("id", function(d, i) { return "box" + i; })
            .attr("width", 10)
            .attr("height", 10)
            .style("fill", function(d, i) { return d3.schemeCategory20[i]; }) 
        legend.append('text') 
            .attr("x", function(d, i) { return 15 + i * space; })
            .attr("y", 20)
            .text(function(d, i) { return d; })
            .attr("id", function(d, i) { return "text" + i; })
            .style("text-anchor", "start")
            .style("font-size", 12);
    }

    d3.select(window)
        .on("resize", function() {
            var targetWidth = document.getElementById("legend").clientWidth;
             space = targetWidth / legendVals.length;
            console.log("targetWidth " + targetWidth+", space "+space);
            d3.select("#legendsvg").attr("width", targetWidth).attr("viewBox", "0 0 " + width + " " + height + "");
            for (var i = 0; i < legendVals.length; i++) {
                d3.select("#box" + i).attr("x", 5 + i * space);
                d3.select("#text" + i).attr("x", 15 + i * space) .style("font-size", );;
            }
        });
    </script>

    <div id="legend">
        <script>makeLegend();</script>
    </div>

</body>

</html>

此代码表示以下结果：

如果从第一个浏览器的宽度缩小，它将减小字体大小。
从第一个浏览器的宽度开始扩展最左边图例的位置。

对于PC浏览器，用户可以随意更改浏览器的宽度。对于智能手机，可以垂直或水平使用。

我想固定每个图例的大小，并仅根据浏览器的宽度动态地更改每个空格。我不知道我的代码有什么问题。

谢谢您的合作。

D3js负责窗口的图例的动态布局

0 个答案: