Javascript 缩放仅缩放我的轴,而不缩放图形上的对象
我有一个当前的缩放功能,我刚学会在D3中使用。但是,当我使用它时,它只移动我的并缩放图形的轴,而不是图形上的对象 我非常了解D3,希望能得到一些帮助 我的javascript源代码发布如下:Javascript 缩放仅缩放我的轴,而不缩放图形上的对象,javascript,graph,d3.js,zooming,axis,Javascript,Graph,D3.js,Zooming,Axis,我有一个当前的缩放功能,我刚学会在D3中使用。但是,当我使用它时,它只移动我的并缩放图形的轴,而不是图形上的对象 我非常了解D3,希望能得到一些帮助 我的javascript源代码发布如下: //Setting generic width and height values for our SVG. var margin = {top: 60, right: 0, bottom: 60, left: 40}, width = 1024 - 70 - margin.
//Setting generic width and height values for our SVG.
var margin = {top: 60, right: 0, bottom: 60, left: 40},
width = 1024 - 70 - margin.left - margin.right,
height = 668 - margin.top - margin.bottom;
//Other variable declarations.
//Creating scales used to scale everything to the size of the SVG.
var xScale = d3.scale.linear()
.domain([0, 1024])
.range([0, width]);
var yScale = d3.scale.linear()
.domain([1, 768])
.range([height, 0]);
//Creates an xAxis variable that can be used in our SVG.
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//Zoom command ...
var zoom = d3.behavior.zoom()
.x(xScale)
.y(yScale)
.scaleExtent([1, 10])
.on("zoom", zoomed);
// The mark '#' indicates an ID. IF '#' isn't included argument expected is a tag such as "svg" or "p" etc..
var SVG = d3.select("#mainSVG")
.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);
//Create background. The mouse must be over an object on the graph for the zoom to work. The rectangle will cover the entire graph.
var rect = SVG.append("rect")
.attr("width", width)
.attr("height", height);
//This selects 4 circles (non-existent, there requires data-binding) and appends them all below enter.
//The amount of numbers in data is the amount of circles to be appended in the enter() section.
var circle = SVG
.selectAll("circle")
.data([40,100,400,1900])
.enter()
.append("circle")
.attr("cx",function(d){return xScale(d)})
.attr("cy",function(d){return xScale(d)})
.attr("r",20);
//This appends a circles to our SVG.
var circle = SVG
.append("circle")
.attr("cx",function(d){ return xScale(d)})
.attr("cy",300)
.attr("r",20);
//Showing the axis that we created earlier in the script for both X and Y.
var xAxisGroup = SVG.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
var yAxisGroup = SVG.append("g")
.attr("class", "y axis")
.call(yAxis);
function zoomed() {
SVG.select(".x.axis").call(xAxis);
SVG.select(".y.axis").call(yAxis);
}
您还需要在缩放时使用更改的轴重新绘制所有元素——D3不会自动为您执行此操作:
function zoomed() {
SVG.select(".x.axis").call(xAxis);
SVG.select(".y.axis").call(yAxis);
SVG.selectAll("circle")
.attr("cx",function(d){return xScale(d)})
.attr("cy",function(d){return xScale(d)});
}
你好,谢谢你的回复。虽然我这样做的时候还是有问题。当我加载页面时,图形开始显示如下所示:。当我尝试进行任何缩放操作时,它会更改圆的坐标,并将它们放置为这样的位置:就像从左上角的0开始,缩放时,它会更改坐标,以匹配从左下角的0开始的图形,而不是从左上角开始的图形。你知道为什么它会这样解释吗?那是因为你对x和y坐标都使用了x刻度。工作版本。跳转的圆是您尚未绑定任何数据的圆。