Question

我只是想要掌握D3并希望在调整窗口大小时调整大小，我设法通过以下示例中注释掉的一些javascript来实现，但是有一个{{3这表示宽度和高度可以保留在SVG元素之外，并且它将在没有javascript的情况下响应性地调整大小。遗憾的是，这对我来说并不适用，而且我最近使用IE11和Firefox进行了测试。

当我离开宽度和高度时，它只显示文字

            **width="960" height="500"**

当我取消注释底部的JS时，它可以正常工作
当我包含宽度和高度时，尺寸不会随窗口大小而变化

该片段在下方，但不起作用，因为我使用的是D3版本4和JQ版本3.x，该片段工具似乎只允许使用早期版本。

如果没有取消注释javascript，如何调整大小？

我确定这是愚蠢和明显的东西，但我已经被困在它上多年了！谢谢

＆＃13;

        $(function () {
            var svg = d3.select("svg"),
                width = +svg.attr("width"),
                height = +svg.attr("height"),
                radius = Math.min(width, height) / 2,
                g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

            var color = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

            var pie = d3.pie()
                .sort(null)
                .value(function (d) { return d.population; });

            var path = d3.arc()
                .outerRadius(radius - 10)
                .innerRadius(0);

            var label = d3.arc()
                .outerRadius(radius - 40)
                .innerRadius(radius - 40);

            d3.csv("data.csv", function (d) {
                d.population = +d.population;
                return d;
            }, function (error, data) {
                if (error) throw error;

                var arc = g.selectAll(".arc")
                  .data(pie(data))
                  .enter().append("g")
                    .attr("class", "arc");

                arc.append("path")
                    .attr("d", path)
                    .attr("fill", function (d) { return color(d.data.age); });

                arc.append("text")
                    .attr("transform", function (d) { return "translate(" + label.centroid(d) + ")"; })
                    .attr("dy", "0.35em")
                    .text(function (d) { return d.data.age; });
            });

            // Uncomment this to make it resize with the window width changes

            //var aspect = width / height,
            //    chart = d3.select('svg');
            //d3.select(window)
            //  .on("resize", function () {
            //      var targetWidth = $(window).width();
            //      chart.attr("width", targetWidth);
            //      chart.attr("height", targetWidth / aspect);
            //  });


        });

＆＃13;

        svg {
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
        }

        body {
            display: inline-block;
            position: relative;
            width: 100%;
            vertical-align: middle;
            background-color:#ffffe0;
        }

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
		  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
		  crossorigin="anonymous"></script>
<svg width="960" height="500" viewBox="0 0 900 600" preserveAspectRatio="xMidYMid meet"></svg>

＆＃13;

data.csv：

age,population
<5,2704659
5-13,4499890
14-17,2159981
18-24,3853788
25-44,14106543
45-64,8819342
=65,612463

Answer 1

当您不使用宽度和高度属性时，您不能指望使用svg.attr("width")读取它们。你真正想要的是viewBox 属性宽度和高度：

    $(function () {
        var svg = d3.select("svg"),
            width = svg.property("viewBox").baseVal.width,
            height = svg.property("viewBox").baseVal.height,
            radius = Math.min(width, height) / 2,
            g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    //...
    });

D3 SVG没有响应地调整大小

1 个答案: