我试图在散点图中对轴进行缩放,这是我试过的
var zoom = d3.zoom()
.scaleExtent([1, 5])
.extent([100, 100], [width - 100, height - 100])
.on("zoom", zoomed);
var gX;
var gY;
xScale = d3.scaleLinear().range([0, width])
yScale = d3.scaleLinear().range([height, 0])
function zoomed() {
svg.selectAll(".charts")
.attr("transform", d3.event.transform);
d3.selectAll('.dot').style("stroke-width", 2 / d3.event.transform.k);
gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale)));
gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));
}
我在下面添加了gX和gY
gX = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
gY = svg.append("g")
.attr("class", "axis axis--y")
.call(yAxis)
当我缩放圆宽时,变焦而不是轴,我猜测我在gX.call&上做错了。 gY.call,我无法想象。有什么建议??
答案 0 :(得分:0)
我做了这样的事情......
像这样调用缩放选择
var svg = d3.select("div#ScatterPlot svg").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(d3.zoom().on("zoom", zoom));
var gX = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
var gY = svg.append("g")
.attr("class", "y axis")
.call(yAxis)
var circles = svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")....
function zoom() {
gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale)));
gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));
var new_XScale = d3.event.transform.rescaleX(xScale);
var new_yScale = d3.event.transform.rescaleY(yScale);
circles.attr("cx", function (d) { return new_XScale(d.xAxisValue) });
circles.attr("cy", function (d) { return new_yScale(d.yAxisValue) });
}