Javascript D3J和基于百分比的变量

我正在尝试使用D3J创建一个响应散点图，使用图表宽度和高度的百分比

所以，我在上面声明了这些变量：

var w = '100%';
var h = '100%';

我的

xScale

和

yScale

以及我的输出圆圈在SVG中的位置正常工作：

    var xScale = d3.scale.linear()
        .domain([0, d3.max(data, function(d) { return d["ttc"]; })])
        .range([0, w]);

    var yScale = d3.scale.linear()
        .domain([0, d3.max(data, function(d) { return d["ctc"]; })])
        .range([0, h]);

    var svg = d3.select(el)
        .append('svg')
        .attr('height', h)
        .attr('width', w);


    svg.selectAll('circle')
        .data(data)
        .enter()
        .append('circle')
        .attr('cx', function(d) { return xScale(d["ttc"]); })
        .attr('cy', function(d) { return yScale(d["ctc"]); })
        .attr('r', 10);

---

但是，由于SVG的性质，从左上角显示圆，而不是从左下角显示典型原点。为了扭转这种情况，通常我会将

yScale

范围

值切换为

[h，0]

，而不是

[0，h]

。执行此操作时，我得到一个错误：属性cy=“NaN”的值无效。我该怎么做才能解决这个问题，并让绘图使用百分比？

您可以将宽度和高度声明为数字，如

var h=100然后在
attr
函数中添加百分比：

.attr('cx', function (d) {
    return xScale(d["ttc"]) + '%';
})

然后，您的svg可以采用以下样式：

.attr('height', h + '%')
.attr('width', w + '%')

或者直接使用CSS。这是一个。
比例不能插值%值--您可以使用绝对值，也可以仅使用数字100作为最大值，并在使用特定值计算比例时添加%。我如何创建适应
xScale
和
yScale
的轴，我建议在调整窗口大小时设置一个事件侦听器，并使用像素值重新渲染图形。那么，初始渲染的大小是多少，以便它能够响应打开的窗口的大小？设置
w
和
h
值时，您会查找容器的大小，例如，
var w=document.body.clientWidth