[英]Unable to understand d3js zoom functionality
The following SIMPLE :) code gives following error.以下 SIMPLE :) 代码给出了以下错误。 Please help me what mistake I am making to ZOOM on onClick on the Circle ?
请帮助我在圆圈上的onClick上缩放我犯了什么错误?
Similarly I will be very thankful if someone can give some idea that if i want to zoom to 3rd Circle DIRECTLY without clicking on it;同样,如果有人可以提供一些想法,如果我想直接放大到第三圈而不单击它,我将非常感激; what should I do ?
我该怎么办 ?
ERROR: Uncaught TypeError: Cannot read property 'apply' of undefined
at qr.call (d3.min.js:2)
at SVGCircleElement.clicked (index.html:52)
at SVGCircleElement.<anonymous> (d3.min.js:2)
And here is the code.这是代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1" />
<title>Zoom & Pan</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="d3.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var width = 600, height = 350;
var data = [
{ "r": 10, "cx": 100, "cy": 150 },
{ "r": 30, "cx": 200, "cy": 150 },
{ "r": 15, "cx": 300, "cy": 150 }
];
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.call(
d3.zoom()
.scaleExtent([1, 7])
.on("zoom", zoom)
);
const g = svg.append("g");
g.selectAll("circle")
.data(data)
.enter()
.append("circle")
//.attr("fill", function (d) { return d.color; })
.attr("fill", (d, i) => d3.interpolateRainbow(i / 3))
.on("click", clicked)
.attr("r", function (d) { return d.r; })
.attr("cx", function (d) { return d.cx; })
.attr("cy", function (d) { return d.cy; });
function clicked(d,i,nodes) {
console.log(nodes);
svg.transition().duration(750).call(
zoom.transform,
d3.zoomIdentity.translate(width / 2, height / 2).scale(40).translate(-d.cx, -d.cy),
d3.mouse(svg.node())
);
}
function zoom() {
g.attr("transform", d3.event.transform);
}
</script>
</body>
</html>
The issue is that zoom.transform
is not a thing.问题是
zoom.transform
不是一回事。 You have created a function called zoom
, if that is important then you'll need to create another variable called something else, eg zoomer, probably in window scope, like width
and height
:您已经创建了一个名为
zoom
的函数,如果这很重要,那么您需要创建另一个称为其他变量的变量,例如 zoomer,可能在窗口范围内,例如width
和height
:
var zoomer = d3.zoom();
Then in your click handler change zoom.transform
to zoomer.transform
:然后在您的点击处理程序
zoom.transform
zoomer.transform
更改为zoomer.transform
:
function clicked(d,i,nodes) {
console.log(nodes);
svg.transition().duration(750).call(
zoomer.transform, //change here
d3.zoomIdentity.translate(width / 2, height / 2).scale(40).translate(-d.cx, -d.cy),
d3.mouse(svg.node())
);
}
If you don't need the zoom
function, then delete that and create the zoom
variable like the zoomer
one above and don't change the click handler.如果您不需要
zoom
功能,然后删除并创建zoom
变量,如zoomer
上面一个不改单击处理程序。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.