D3.js 有没有一种方法可以使d3 scale.range动态化，从而可以调整窗口大小？

我正在制作一个包含迷你图（简单的d3折线图）的表格。我将svg的宽度设置为100%，以确保在用户更改浏览器窗口大小以及表格缩小或扩展时，svg会增大或缩小：

d3.select(@el).select('#week-trend').append("svg").attr("width", "100%")...

是否有一种方法可以在x刻度范围内执行类似操作？

到目前为止，它被硬编码为一个在页面加载时起作用的值，但如果用户更改浏览器窗口大小，则会导致图形被剪裁，或者不会填充整个svg：

x = d3.scale.linear().domain([0, xMax]).range([0, 100])

---

我认为最好让svg具有响应性，在这种情况下，您需要添加css：

#svg{
    width:75%; //the % you want the svg div to be
    height: auto;
    float:left;
    clear:left;
    }

然后在脚本中按以下方式创建svg：

var svg = d3.select("body")
            .append("div")
            .attr("id", "svg")
            .append("svg")
            .attr("viewBox", "0 0 " + width + " " + height )
            .attr("preserveAspectRatio", "xMinYMin");

当然，设置一个宽度和高度变量

---

编辑：对不起，我不明白您已经获得了svg响应功能

您应该能够使用百分比定位而不是像素。因此，创建一个正常的范围（但作为要使用的svg的百分比，所以可能不是0到100），但在数据循环中，使用

.attr（'x'，function（d）{return x（d）+'%'；}）

。这些百分比将随着svg的包含而扩展

---

（不过，请确保在文本大小等方面继续使用像素值！）

看看如何使用像素值。基本思想是绑定到窗口的

resize

事件，调整容器的大小（作为窗口大小的函数），然后重新绘制绘图。只需使用类似

window.innerWidth

的动态方式来确定范围。没有“数据循环”，至少我认为不是这样。我只需在svg中添加一条路径，并将line（[array of my data]）作为路径的“d”属性传递。啊，是的，svg路径不能使用百分比。可以使用多段线，但这并不方便。