Question

我正在尝试创建一个散点图，其中附加的svg元素的尺寸是按百分比设置的（因此它占据了屏幕的50％或100％，而不是X个像素数）。

然后我想用svg元素填充其位置被缩放到0到100之间的圆圈，并设置为百分比，如下所示：.attr('cx', function(d){return xScale(d[0]) + '%'})

此方法适用于设置圆位置，但我无法在轴上获得正确的缩放。我认为它们是通过transform元素设置的，并且不希望将%作为参数的一部分。

请参阅js小提琴，并附上一个完整示例：https://jsfiddle.net/s01pg3fa/5/

未正确缩放轴以填充整个svg元素。感谢您的任何意见。

Answer 1

您可以获取svg的客户端大小并在轴刻度中使用它：

var svgClientSize = svg.node().getBoundingClientRect();

在轴刻度上使用它：

var xScale = d3.scaleLinear()
            .domain([0, d3.max(data, function(d){return d[0]})])
            .range([padding,svgClientSize.width-padding])
var yScale = d3.scaleLinear()
            .domain([0, d3.max(data, function(d){return d[1]})])
            .range([svgClientSize.height-padding,padding])

在这种情况下，您不需要圈子的'％'

这是更新的js小提琴：https://jsfiddle.net/q7xm8n73/1/

D3 - 设置百分比刻度轴

1 个答案: