Javascript 当光标位于内部svg元素上时,d3缩放中断
我已经实现了d3缩放以下简要说明 我正在使用。这是我与d3的第一个项目 我的目标是要有一种平面图,显示场馆内的展位。与教程类似,我从数组中绘制了形状元素。在我的例子中,我将一组展位信息输入到一个元素网格中 缩放功能工作正常,除非光标位于某个矩形的边框或填充上,或者位于元素的文本上。如果光标的点接触这些元素中的任何一个,缩放行为将停止工作 尝试用鼠标滚轮缩放,光标在空白处,而不是触摸形状或文本 我尝试在某个地方安装一个console.log,以查看事件中没有传递的内容,但在找到可以获取事件参数的位置时遇到了困难 非常感谢您的帮助!这是我的密码:Javascript 当光标位于内部svg元素上时,d3缩放中断,javascript,d3.js,svg,Javascript,D3.js,Svg,我已经实现了d3缩放以下简要说明 我正在使用。这是我与d3的第一个项目 我的目标是要有一种平面图,显示场馆内的展位。与教程类似,我从数组中绘制了形状元素。在我的例子中,我将一组展位信息输入到一个元素网格中 缩放功能工作正常,除非光标位于某个矩形的边框或填充上,或者位于元素的文本上。如果光标的点接触这些元素中的任何一个,缩放行为将停止工作 尝试用鼠标滚轮缩放,光标在空白处,而不是触摸形状或文本 我尝试在某个地方安装一个console.log,以查看事件中没有传递的内容,但在找到可以获取事件参数的位
var svg = d3.select("#venue-svg"); // this is my svg element
// the zoom rectangle. from the tutorial: 'The zoom behavior is applied
// to an invisible rect overlaying the SVG element; this ensures that it
// receives input, and that the pointer coordinates are not affected by
// the zoom behavior’s transform.'
svg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.style("fill", "none")
.style("pointer-events", "all")
.call(
d3
.zoom()
.scaleExtent([1 / 2, 4])
.on("zoom", zoomed)
);
function zoomed() {
g.attr("transform", d3.event.transform);
}
// a parent <g> that holds everything else and is targeted
// for the transform (from the tutorial).
var g = svg.append("g");
// the groups that hold each booth table, associated org name, etc.
var tables = g
.selectAll("g")
.data(venueBooths)
.enter()
.append("g")
.attr("transform", function(d) {
return "translate(" + d.x + " " + d.y + ")";
});
var tableRects = tables
.append("rect")
.attr("stroke", "steelblue")
.attr("stroke-width", "2px")
.attr("width", function(d) {
return d.w;
})
.attr("height", function(d) {
return d.h;
})
.attr("fill", "none")
.attr("fill", function(d) {
return $.isEmptyObject(d.reservation) ? "none" : "#FF5733";
})
.attr("id", function(d) {
return "table-" + d.id;
});
tables
.append("text")
.text(function(d) {
return "Booth " + d.id;
})
.attr("dx", 5)
.attr("dy", 60)
.attr("font-size", "8px");
tables
.append("text")
.text(function(d) {
return d.reservation.orgName ? d.reservation.orgName : "Available";
})
.attr("dy", 15)
.attr("dx", 5)
.attr("font-size", "9px")
.attr("font-weight", "bold");
最后尝试创建rect,使DOM如下所示:
<svg>
<g></g>
<rect></rect>
</svg>
谢谢,下面的valangar给出了一个有效的解决方案,并将更改推送到了我链接的演示中。我更新了帖子以保存并删除了链接。
var svg = d3.select("#venue-svg"); // this is my svg element
// the zoom rectangle. from the tutorial: 'The zoom behavior is applied
// to an invisible rect overlaying the SVG element; this ensures that it
// receives input, and that the pointer coordinates are not affected by
// the zoom behavior’s transform.'
function zoomed() {
g.attr("transform", d3.event.transform);
}
// a parent <g> that holds everything else and is targeted
// for the transform (from the tutorial).
var g = svg.append("g");
// the groups that hold each booth table, associated org name, etc.
var tables = g
.selectAll("g")
.data(venueBooths)
.enter()
.append("g")
.attr("transform", function(d) {
return "translate(" + d.x + " " + d.y + ")";
});
var tableRects = tables
.append("rect")
.attr("stroke", "steelblue")
.attr("stroke-width", "2px")
.attr("width", function(d) {
return d.w;
})
.attr("height", function(d) {
return d.h;
})
.attr("fill", "none")
.attr("fill", function(d) {
return $.isEmptyObject(d.reservation) ? "none" : "#FF5733";
})
.attr("id", function(d) {
return "table-" + d.id;
});
tables
.append("text")
.text(function(d) {
return "Booth " + d.id;
})
.attr("dx", 5)
.attr("dy", 60)
.attr("font-size", "8px");
tables
.append("text")
.text(function(d) {
return d.reservation.orgName ? d.reservation.orgName : "Available";
})
.attr("dy", 15)
.attr("dx", 5)
.attr("font-size", "9px")
.attr("font-weight", "bold");
svg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.style("fill", "none")
.style("pointer-events", "all")
.call(
d3
.zoom()
.scaleExtent([1 / 2, 4])
.on("zoom", zoomed)
);