ось d3 не масштабируется согласно диапазону - PullRequest
Новая
       36

ось d3 не масштабируется согласно диапазону

0 голосов
/ 02 сентября 2018

Я пытаюсь создать адаптивный график в d3. Это фрагмент кода: 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="container" class="svg_container">
    </div>
</body>
<style>
    #container{
    width: 90%;
    height: 50vh;
    margin: auto;
    border: 1px solid red;
    }
</style>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script>



    var width = 800,
        height = 425,
        aspect = width / height;

    console.log(width,height,aspect);
    var margin= 20;
    var canvas = d3.select("#container")
                   .append("svg")
                   .attr("width", width)
                   .attr("height", height)
                   .attr("viewBox", "0 0 " + width + " " + height)
                   .attr("preserveAspectRatio", "xMinYMid")
                   .style("border","1px solid black");

    var g = canvas.append("g")
                  .attr("transform", "translate(" + margin+ "," + margin + ")");                   



    window.addEventListener("load", resize);
    window.addEventListener("resize", resize);


    var x = d3.scaleLinear()
              .domain([0,25]);

    var xAxis = d3.axisBottom()
                .scale(x);  

    var xg = g.append("g")
              .attr("class", "x axis")
              .call(xAxis);         




    function resize(){
        d3.csv("time.csv", data =>{
        var targetWidth= document.getElementById("container").offsetWidth;

        var targetHeight = targetWidth/aspect;

        canvas.attr("width", targetWidth);
        canvas.attr("height", targetHeight);

        x.range([0, targetWidth]);
        xAxis.scale(x);

        console.log(targetWidth, x.range());

        xg.call(xAxis);

        });
    }

</script>
</html>

Это это скрипка Однако, хотя svg и ось реагируют, кажется, что ось не имеет правильного размера. (Console.log (x.range ()) показывает диапазон, равный (отзывчивой) ширине, но сгенерированная ось не выглядит таковой.

...