Javascript 如何确保缩放不会'；不要低于零并避免缩放点接触y轴和z轴？d3.zoom v4

我是D3.js的新手。我被以下概念所困扰：

我在D3.js V4中找不到这样做的示例，我不知道如何导航它

要限制缩放超过零，我想使用最小缩放为零。我不知道如何在散点图中这样做。

以避免缩放的点接触y轴和z轴。我想点淡入淡出或消失时，它接触到轴的地区。

这是我的密码

var margin={top:20，right:20，bottom:30，left:40}，
宽度=750-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var xMax=d3.max（graphdata，函数（d）{返回d[“x”]；}），
yMax=d3.max（graphdata，函数（d）{返回d[“y”]；}）；
var xScale=d3.scaleLinear（）
.范围（[0，宽度]）
.domain（[0，xMax]）.nice（）；
var yScale=d3.scaleLinear（）
.范围（[高度，0]）
.domain（[0，yMax]）.nice（）；
var xAxis=d3.axisBottom（）
.比例（xScale）；
变量yTicks=5
var yAxis=d3.axisLeft（）
.比例尺（yScale）；
var svg=d3.选择（#绘图空间”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“id”、“绘图”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//创建剪裁区域
svg.append（“defs”）.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var gX=svg.append（'g'）
.attr（'transform'，'translate（0'，+height+'））
.attr（'class'，'x轴'）
.呼叫（xAxis）；
var gY=svg.append（'g'）
.attr（'transform'，'translate（0,0'））
.attr（'class'，'y轴'）
.呼叫（yAxis）
);
var bubble=svg.selectAll（“.bubble”）
.数据（图形数据）
.enter（）.append（'path'）
.attr（'class'，'bubble'）
.attr（“d”，d3.symbol（）.type（d3.symbolCircle）.size（30））
.attr（“转换”，函数（d）{return”translate（“+xScale（d[“x”]）+”，“+yScale（d[“y”]）+”；）
.attr（'r'，3.5）
.attr（'fill-opacity'，0.7）
.style（'fill'，'blue'）；
bubble.append（'title'）
.attr（'x'，3.5）
.文本（键[0]）；
//平移和缩放
var zoom=d3.zoom（）
.scaleExtent（[5,20]）
.translateExtent（[[0,0]，[width，height]]
.范围（[[0,0]，[width，height]]）
。打开（“缩放”，缩放）；
svg.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.style（“填充”、“无”）
.style（“指针事件”、“全部”）
.attr（'transform'，'translate（'+margin.left+'，'+margin.top+'））
.呼叫（缩放）；
函数缩放（）{
var newxscale=d3.event.transform.rescaleX（xScale）；
var new_yScale=d3.event.transform.rescaleY（yScale）；
gX.call（xAxis.scale（newxscale））；
gY.call（雅克斯量表（新雅思量表））；
气泡数据（图形数据）
.attr（“transform”，函数（d）{return”translate（“+new_xScale（d[“x”]）+”，“+new_yScale（d[“y”]）+”）”）；）
}

您的第一个问题，负数，是允许从初始缩放状态缩小的结果。如果比例已包含所有数据（因为您是动态创建比例的），则不必从此缩放级别缩小。从初始缩放缩小将创建大于平移范围的打印区域，这将导致比例中出现负值。尝试：

zoom.scaleExtent([1,4]);

这将修复负数，但由于未正确使用剪辑路径，这些平移范围内仍可能出现溢出

您当前使用一个名为

svg

的

g

来打印点和绘制轴，但您不希望将剪辑区域应用于该

g

，因为轴位于您希望绘制点的位置之外。相反，您可以仅为点创建一个新的

g

，并使用

g.attr（'clip-path'，'url（#id'）将绘图区域应用于该
g
。下面我将其称为
g
plotArea
，并演示这两个更改：


var margin={top:20，right:20，bottom:30，left:40}，
宽度=750-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var graphdata=d3.范围（200）.映射（函数（d）{
返回{x:d3.randomLogNormal（）（），y:d3.randomLogNormal（）（）}
})    
var xMax=d3.max（graphdata，函数（d）{返回d[“x”]；}），
yMax=d3.max（graphdata，函数（d）{返回d[“y”]；}）；
var xScale=d3.scaleLinear（）
.范围（[0，宽度]）
.domain（[0，xMax]）.nice（）；
var yScale=d3.scaleLinear（）
.范围（[高度，0]）
.域（[0，yMax]）；
var xAxis=d3.axisBottom（）
.比例（xScale）；
变量yTicks=5
var yAxis=d3.axisLeft（）
.比例尺（yScale）；
var svg=d3.选择（#绘图空间”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“id”、“绘图”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//创建剪裁区域
svg.append（“defs”）.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var plotArea=svg.append（“g”）//我们不想剪裁轴。
.attr（“剪辑路径”、“url（#剪辑）”）；
var gX=svg.append（'g'）
.attr（'transform'，'translate（0'，+height+'））
.attr（'class'，'x轴'）
.呼叫（xAxis）；
var gY=svg.append（'g'）
.attr（'transform'，'translate（0,0'））
.attr（'class'，'y轴'）
.呼叫（yAxis）
);
var bubble=plotArea.selectAll（'.bubble'）//添加到剪裁区域。
.数据（图形数据）
.enter（）.append（'path'）
.attr（'class'，'bubble'）
.attr（“d”，d3.symbol（）.type（d3.symbolCircle）.size（30））
.attr（“transform”，函数（d）{return”translate（“+xScale（d[“x”]））