[英]Zoom function in d3js Scatter plot chart
我正在尝试对散点图中的轴进行缩放,这就是我尝试过的
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上做错了,我无法弄清楚。 有什么建议么??
我做了这样的事...
像这样调用zoom on select
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) });
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.