无缩放的气泡图

Question

我试图在d3.js中创建一个没有缩放的气泡图。例如:

• 定义x轴和y轴的气泡图
• 我有x和y坐标的数据
• 我需要在气泡图上完全相同的x和y坐标上添加一个气泡

我尝试的是:

var svg = d3.select('#chart'),
width = 400,
height = 300;
var x = d3.scaleLinear()
.domain([0, 10])
.range([ 0,width ]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add Y axis
var y = d3.scaleLinear()
.domain([0.0, 10.0])
.range([ height, 0]);
svg.append("g")
.call(d3.axisLeft(y));
svg.append('g')
.append("circle")
.attr("cx", "5" )
.attr("cy", "0.5" )
.attr("r", "2")
.style("fill", "red")
.style("opacity", "0.7")
.attr("stroke", "black");

#chart {
overflow: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<svg id="chart" width="400" height="300"></svg>

但是它仍然在缩放!我希望样本圆出现在图表中的cx = 5, cy = 0.5处，半径为2，但它出现在随机位置，半径为随机。

有人能帮忙吗?一旦我理解了如何为一个点做这件事，我就能很容易地为整个数据集做这件事。我看过的所有教程都有缩放，所以我在这里问

Answer 1

你说的"没有缩放">不清楚是什么意思。你是说没有音阶吗?当您执行.attr("cx", "5" )时，您只是将圆圈定位在SVG坐标系统的x轴上的5个像素处。因此，如果这是你想要的，你的图表是正确的。

也许让你感到困惑的是overflow: visible，它可以让你很难看到SVG中几个元素的确切位置，所以要摆脱它。

另一方面，如果你设置刻度，使用它们:

.attr("cx", x(5))

修改后的代码:

var svg = d3.select('#chart'),
width = 400,
height = 300,
marginLeft = 20;
var x = d3.scaleLinear()
.domain([0, 10])
.range([marginLeft, width]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add Y axis
var y = d3.scaleLinear()
.domain([0.0, 10.0])
.range([height, 0]);
svg.append("g")
.attr("transform", "translate(" + marginLeft + ",0)")
.call(d3.axisLeft(y));
svg.append('g')
.append("circle")
.attr("cx", x(5))
.attr("cy", y(0.5))
.attr("r", "2")
.style("fill", "red")
.style("opacity", "0.7")
.attr("stroke", "black");

#chart {
overflow: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<svg id="chart" width="400" height="300"></svg>

半径是正确的，这里没有随机半径