Javascript D3 SVG不'；不能相应地调整大小

我刚刚开始学习D3，想让它在调整窗口大小时调整大小，我通过一些javascript实现了这一点，在下面的示例中注释掉了这些javascript，但是有一个例子说，SVG元素可以忽略宽度和高度，它将在没有javascript的情况下相应地调整大小。遗憾的是，这对我不起作用，我正在用IE11和Firefox最新版本进行测试

当我省略宽度和高度时，它只显示文本

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

当我取消注释底部的JS时，它就工作了

当我包括宽度和高度时，大小不会随窗口大小而改变

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

如何在不取消javascript注释的情况下调整其大小

我相信这是愚蠢而明显的，但我已经坚持了很久了！。。谢谢

$（函数（）{
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”），
半径=数学最小值（宽度、高度）/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（空）
.value（函数（d）{返回d.population；}）；
var path=d3.arc（）
.外层（半径-10）
.内半径（0）；
var label=d3.arc（）
.外层（半径-40）
.内半径（半径-40）；
d3.csv（“data.csv”，函数（d）{
d、 人口=+d.人口；
返回d；
}，函数（错误，数据）{
如果（错误）抛出错误；
var arc=g.selectAll（“.arc”）
.数据（pie（数据））
.enter（）.append（“g”）
.attr（“类”、“弧”）；
arc.append（“路径”）
.attr（“d”，路径）
.attr（“fill”，函数（d）{返回颜色（d.data.age）；}）；
弧。追加（“文本”）
.attr（“transform”，函数（d）{return”translate（“+label.centroid（d）+”）；}）
.attr（“dy”，“0.35em”）
.text（函数（d）{返回d.data.age；}）；
});
//取消对此的注释，使其随着窗口宽度的更改而调整大小
//变量纵横比=宽度/高度，
//chart=d3。选择（'svg'）；
//d3.选择（窗口）
//.on（“调整大小”，函数（）{
//var targetWidth=$（窗口）.width（）；
//图表属性（“宽度”，目标宽度）；
//图表属性（“高度”，目标宽度/纵横比）；
//  });
});
svg{
显示：内联块；
位置：绝对位置；
排名：0；
左：0；
}
身体{
显示：内联块；
位置：相对位置；
宽度：100%；
垂直对齐：中间对齐；
背景色：#ffffe0；
}
当您关闭宽度和高度属性时，您不能期望使用
svg.attr（“宽度”）
读取它们。您真正想要的是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 + ")");

    //...
    });

当您关闭宽度和高度属性时，您不能期望使用
svg.attr（“宽度”）
读取它们。您真正想要的是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 + ")");

    //...
    });

CSV是的，对不起，它是从一个在线示例中抓取的：我将编辑问题以添加它您的代码片段甚至不可执行！您的代码使用D3 v4，而您引用的是D3 v3.4.11。我想我已经修复了cdn链接，但仍然无法工作，因为data.csv不存在。请您给出一个数据示例。csv是的，对不起，它是从在线示例中获取的：我将编辑问题以添加它您的代码片段甚至不可执行！您的代码使用D3 v4，而您引用的是D3 v3.4.11。我想我已经修复了cdn链接，但仍然无法工作，因为data.csv不存在。谢谢-这显然是朝着正确方向迈出的一步，但仍然无法工作。我现在在胡闹，看看发生了什么事。你现在在IE11上吗？到目前为止，我只测试过FF。啊哈！FF工作-那很酷。我不太担心IE。好的，谢谢你在这里的努力，谢谢-这显然是朝着正确的方向迈出的一步，但仍然不起作用。我现在在胡闹，看看发生了什么事。你现在在IE11上吗？到目前为止，我只测试过FF。啊哈！FF工作-那很酷。我不太担心IE。好的，谢谢你的努力