D3js Динамическая раскладка легенды для ответственного окна - PullRequest
Новая
       14

D3js Динамическая раскладка легенды для ответственного окна

0 голосов
/ 16 марта 2019

Я пытаюсь создать легенду с динамически изменяющейся шириной, чтобы применить ПК и смартфон.

enter image description here

Желание выглядит следующим образом:

  • Чтобы прикрепить легенду к левому краю.
  • Чтобы установить пространство каждой легенды в зависимости от ширины браузера.

Он будет внедрен в основной html через iframe.

Сначала я получил ширину браузера. Он рассчитывается из "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>

Этот код выражает следующий результат:

  • Если оно сузится от ширины первого браузера, оно уменьшится размер шрифта.
  • Расширение от ширины первого браузера перемещает положение самой левой легенды.

В случае браузера ПК пользователь может изменить ширину браузера по своему усмотрению. В случае смартфона его можно использовать вертикально или горизонтально.

Я хочу зафиксировать размер каждой легенды и динамически изменять только каждое пространство в соответствии с шириной браузера. Я не знаю, что не так с моим кодом.

Спасибо за сотрудничество.

...