Question

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

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

有没有办法在x-scale范围内做类似的事情？

截至目前，它已被硬编码为适用于页面加载的值，但会导致图形被剪切，或者如果用户更改浏览器窗口大小，则不会填满整个svg：

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

Answer 1

我认为最好让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响应

Answer 2

您应该可以使用百分比定位而不是像素。因此，正常创建您的范围（但是您想要使用的svg的百分比 - 可能不是0到100），但在数据循环中，使用.attr('x', function(d) { return x(d) + '%'; })。这些百分比将与包含的svg一起缩放。

（确保继续使用像文本大小这样的东西的像素值！）

有没有办法让d3 scale.range动态，以便它适用于窗口大小调整？

2 个答案: