我正在研究 d3.js 库，我正在按照 tutorial 来放大图表。我集成了所有内容并且效果很好。 这是我的最终程序:
<!DOCTYPE html>
<meta charset="utf-8">
<title>Zoom + Pan</title>
<style>
body {
position: relative;
width: 960px;
}
svg {
font: 10px sans-serif;
shape-rendering: crispEdges;
}
rect {
fill: #ddd;
}
.axis path,
.axis line {
fill: none;
stroke: #fff;
shape-rendering: crispEdges;
}
.dot {
}
button {
position: absolute;
right: 30px;
top: 30px;
}
</style>
<button>Reset</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var margin = {top: 40, right: 50, bottom: 60, left: 70},
width = 1060 - margin.left - margin.right,
height = 700 - margin.top - margin.bottom;
var zoom = d3.behavior.zoom()
.scaleExtent([1, 10])
.on("zoom", zoomed);
var x = d3.scale.linear()
.domain([-width / 2, width / 2])
.range([0, width]);
var y = d3.scale.linear()
.domain([-height / 2, height / 2])
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickSize(-height);;
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickSize(-width);
var kmeans = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom);
d3.tsv("test.tsv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.y = +d.y;
d.x = +d.x;
});
x.domain(d3.extent(data, function(d) { return d.x; })).nice();
y.domain(d3.extent(data, function(d) { return d.y; })).nice();
kmeans.append("rect")
.attr("width", width)
.attr("height", height)
kmeans.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", 500)
.attr("y", 50)
.style("text-anchor", "end")
.text("1° Principal Component");
kmeans.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("x", -200)
.attr("y", -50)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("2° Principal Component");
var dot = kmeans.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
.style("fill", function(d) { return color(d.cluster); });
var legend = kmeans.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(-100," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
});
d3.select("button").on("click", reset);
function zoomed() {
kmeans.select(".x.axis").call(xAxis);
kmeans.select(".y.axis").call(yAxis);
}
function reset() {
d3.transition().duration(750).tween("zoom", function() {
var ix = d3.interpolate(x.domain(), [-width / 2, width / 2]),
iy = d3.interpolate(y.domain(), [-height / 2, height / 2]);
return function(t) {
zoom.x(x.domain(ix(t))).y(y.domain(iy(t)));
zoomed();
};
});
}
</script>
这是 test.tsv:
x y cluster
-1.0403321821456555 -0.9975352942962847 1 Cluster
-1.0404728255519613 -1.0021499065423058 1 Cluster
-1.0405312135780753 -1.0036348433263207 1 Cluster
-1.0405417259454817 -0.9883123582794969 1 Cluster
-1.0406344016908704 -0.9988259809896288 1 Cluster
-1.0406850822323188 -1.004030268612692 1 Cluster
-1.0406958447337742 -1.0065636473623911 1 Cluster
-1.0408667295862442 -1.0046081788513885 1 Cluster
-1.0408845367165218 -0.995137367062602 1 Cluster
-1.040932294864444 -0.991519347648691 1 Cluster
-1.040976952803462 -0.9833995692226501 1 Cluster
-1.0409896369345166 -0.9951495809699621 1 Cluster
-1.0410051379794218 -0.99448305469843 1 Cluster
-1.0410265061033306 -0.9951333768928067 1 Cluster
-1.0410330574179099 -0.9949308462686461 1 Cluster
-1.0410357249485886 -1.0053243527321372 1 Cluster
-1.0410491702402065 -1.006726904241483 1 Cluster
-1.041049812593761 -0.9865506278675225 1 Cluster
如果有人运行此代码，它会显示绘图，但其中的元素仍然不可缩放。有人能告诉我出了什么问题吗？
最佳答案
在您的 zoomed() 函数中，您仅更新两个轴。您没有更新图表内的 svg 元素(您的案例中的 svg-circle 元素)。
如果将以下内容添加到 zoomed() 函数中，它应该可以工作:
kmeans.selectAll(".dot")
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
也许值得一提的是，这显然不会扩大你的圈子。这只会调整图表的域并相应地重新定位元素。 如果您正在寻找真正的缩放效果，我建议您使用以下内容:
kmeans.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
关于javascript - 如何使用 d3.js 缩放图表内的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32611919/