Question

这里是D3.js目前的样子我想要实现的是，当我调整窗口大小时，内部需要调整四个表的大小。没有添加新表。

目前它只是不断添加新表。如何纠正这种行为？

1.json

的内容

[
[[1,3,3,5,6,7],[3,5,8,3,2,6],[9,0,6,3,6,3],[3,4,4,5,6,8],[3,4,5,2,1,8]],
[[1,3,3,5,6,7],[3,5,8,3,2,6],[9,0,6,3,6,3],[3,4,4,5,6,8],[3,4,5,2,1,8]],
[[1,3,3,5,6,7],[3,5,8,3,2,6],[9,0,6,3,6,3],[3,4,4,5,6,8],[3,4,5,2,1,8]],
[[1,3,3,5,6,7],[3,5,8,3,2,6],[9,0,6,3,6,3],[3,4,4,5,6,8],[3,4,5,2,1,8]]
]

D3.js的内容：

<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.js" type="text/JavaScript"></script-->
<style>
    rect {
        stroke: #9A8B7A;
        stroke-width: 1px;
        fill: #CF7D1C;
    }
    svg{
        width: 50%;
        height: 50%;
    }

</style>
<body>



</body>
<script>

    function draw(){
        d3.json("array_data/1.json", function(data){
            for (i=0; i<data.length; ++i) {
                main(data[i]);
            }
        })
    }
    function main(dataset){
        var local = d3.local();
        var svg = d3.select("body").append("svg"),
                bBox = svg.node().getBoundingClientRect(),
                margin = {top: 20, right: 20, bottom: 30, left: 40},
                width = bBox.width - margin.left - margin.right,
                height = bBox.height - margin.top - margin.bottom;


        var x = d3.scaleBand().rangeRound([0, width]);
        var y = d3.scaleBand().rangeRound([0, height]);

        y.domain(dataset.map(function(d,i) { return i; }));

        var maxChildLength= d3.max(dataset, function(d) { return d.length; });
        var xArr=Array.apply(null, {length: maxChildLength}).map(Function.call, Number);
        x.domain(xArr);

        var maxNum = d3.max(dataset, function(array) {
            return d3.max(array);
        });

        var color=d3.scaleLinear().domain([0,maxNum]).range([0,1]);

        svg.append("g")
                .selectAll("g")
                .data(dataset)//use top-level data to join g
                .enter()
                .append("g")
                .selectAll("rect")
                .data(function(d, i) {//for each <g>, use the second-level data (return d) to join rect
                    local.set(this, i);//this is the <g> parent
                    return d;
                })
                .enter()
                .append("rect")

                .attr("x", function(d, i, j) {
                    // return (i * 20) + 40;
                    return x(i);
                })
                .attr("y", function(d) {
                    //    return (local.get(this) * 20) + 40;
                    return y(local.get(this));
                })
            //.attr("width",20)
                .attr("width", x.bandwidth())
                .attr("height", y.bandwidth())
                .attr("fill-opacity",function(d){console.log(color(+d));return color(+d);})



        svg.append("g")
                .selectAll("g")
                .data(dataset)
                .enter()
                .append("g")
                .selectAll("text")
                .data(function(d, i) {

                    local.set(this, i)
                    return d;
                })
                .enter()
                .append("text")
                .text(function(d, i, j) {
                    return d;
                })
                .attr("x", function(d, i, j) {
                    // return (i * 20) + 40;
                    return x(i);
                })
                .attr("y", function(d) {
                    return y(local.get(this));
                    //return (local.get(this) * 20) + 40;
                })
                .attr("dx", x.bandwidth()/2)
                .attr("dy", y.bandwidth()/2)
                .attr("dominant-baseline", "central")//vertical - http://bl.ocks.org/eweitnauer/7325338
                .attr("text-anchor", "middle")//horizontal - https://bl.ocks.org/emmasaunders/0016ee0a2cab25a643ee9bd4855d3464
                .attr("font-family", "sans-serif")
                .attr("font-size", "20px");


        svg.append("g")
                .append("text")
                .attr("x", width/2)
                .attr("y", height)
                .attr("dominant-baseline", "text-before-edge")
                .style("text-anchor", "middle")
                //.attr("transform", "translate("+width/2+"," + height+ ")")
                .text("Units sold");





    }

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



</script>

Answer 1

使用您的方法，您需要首先清除HTML，然后重绘。所以，在main()函数的开头：

var element = d3.select('body');

element.innerHTML = '';

svg = d3.select(element).append('svg');

还有其他调整大小的方法（视口，具有调整大小功能），但这适合您现在存在的代码。

根据窗口大小调整SVG大小

1 个答案: