Javascript D3-将文本标签放置在原点可移动轴的中心位置
我有一个图表，它的轴以原点（0,0）为中心。当我平移或放大时，轴应保持在原点，除非它不在视图中，在这种情况下，轴将限制在图表的边界边缘 我需要文本标签跟随这些轴，并在任一轴离开屏幕时沿屏幕边缘保持可见。我要说的行为很像是在图形上的desmos.com文本标签，当你在周围平移时，它们沿着边缘保持在屏幕上 我不得不通过将“不透明度”设置为0并创建两条线作为轴来删除原始轴 下面是用于为每个垂直网格线定位水平标签的（类伪）代码，但我不知道如何将其转换为d3.jsJavascript D3-将文本标签放置在原点可移动轴的中心位置,javascript,d3.js,Javascript,D3.js,我有一个图表，它的轴以原点（0,0）为中心。当我平移或放大时，轴应保持在原点，除非它不在视图中，在这种情况下，轴将限制在图表的边界边缘 我需要文本标签跟随这些轴，并在任一轴离开屏幕时沿屏幕边缘保持可见。我要说的行为很像是在图形上的desmos.com文本标签，当你在周围平移时，它们沿着边缘保持在屏幕上 我不得不通过将“不透明度”设置为0并创建两条线作为轴来删除原始轴 下面是用于为每个垂直网格线定位水平标签的（类伪）代码，但我不知道如何将其转换为d3.js /* THIS CODE INSIDE
/* THIS CODE INSIDE zoomed function */
/* get position/value of (0,**y**) of origin */
var y = newY(0)
for each label {
/* get current label bounding box */
var bb = label.getBBox();
/* get labels x position */
var x = label.getX();
if (y < 0){ /* if < than 0 (top of chart)*/
/* label will be positioned at top of the screen */
y = bb.height;
} else if (y >= height - bb.height){
/* label will be positioned at bottom of the screen */
y = height;
} else {
/* label will be positioned somewhere in the middle of the screen */
y = y + bb.height;
}
/* draw new label at x and y values or change current labels position */
svg.append("text")
.attr("x", x)
.attr("y", y)
.text(/* tick value here */)
}
/*此代码位于缩放函数中*/
/*获取原点（0，**y**）的位置/值*/
变量y=newY（0）
对于每个标签{
/*获取当前标签边界框*/
var bb=label.getBBox（）；
/*获取x位置的标签*/
var x=label.getX（）；
如果（y<0）{/*if<0（图表顶部）*/
/*标签将位于屏幕顶部*/
y=bb.高度；
}否则，如果（y>=高度-bb.高度）{
/*标签将位于屏幕底部*/
y=高度；
}否则{
/*标签将被放置在屏幕中部某处*/
y=y+bb.高度；
}
/*在x和y值处绘制新标签或更改当前标签位置*/
svg.append（“文本”）
.attr（“x”，x）
.attr（“y”，y）
.text（/*在此处勾选值*/）
}
文件
身体{
显示器：flex；
}
.集装箱{
填充：10px；
保证金：0自动；
边框：1px灰色实心；
}
g、 网格。勾选线{
笔划：浅灰色！重要；
}
.d3轴{
填充：无；
笔画：黑色；
形状渲染：边缘清晰；
}
功能钳位（值、最小值、最大值）{
返回Math.min（Math.max（value，Math.min（min，max）），Math.max（min，max））；
}
常量图=函数图（容器）{
可变宽度=350，
高度=350；
var svg=d3
.选择（容器）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var zoom=d3.zoom（）.scaleExtent（[1，10]）。打开（“缩放”，缩放）；
var x=d3
.scaleLinear（）
.domain（[0，5]）
.范围（[-1，宽度+1]）；
变量y=d3
.scaleLinear（）
.domain（[5，0]）
.范围（[-1，高度+1]）；
var xTicks=d3
.axisBottom（x）
.刻度（（（宽度+2）/（高度+2））*10）
.尺寸（高度）
.填充物（8-高度）；
变量yTicks=d3
.右（y）
.滴答声（10）
.尺寸（宽度）
.填充物（8-宽度）；
var gX=svg
.附加（“g”）
.attr（“id”、“网格-x”）
.attr（“类”、“网格”）
.呼叫（xTicks）
.呼叫（（g）=>
g、 选择（“.domain”）.attr（“不透明度”，0）
)；/*隐藏轴线*/
var-gY=svg
.附加（“g”）
.attr（“id”、“grid-y”）
.attr（“类”、“网格”）
.呼叫（yTicks）
.call（（g）=>g.select（.domain”）.attr（“不透明度”，0））；
svg
.附加（“行”）
.attr（“id”、“ax行”）
.attr（“x1”，0）
.attr（“y1”，高度/2）
.attr（“x2”，宽度）
.attr（“y2”，高度/2）
.attr（“类别”、“d3轴”）；
svg
.附加（“行”）
.attr（“id”、“ay行”）
.attr（“x1”，0）
.attr（“y1”，高度/2）
.attr（“x2”，宽度）
.attr（“y2”，高度/2）
.attr（“类别”、“d3轴”）；
调用（缩放）；
函数缩放（）{
var newX=d3.event.transform.rescaleX（x）；
var newY=d3.event.transform.rescaleY（y）；
gX.call（xTicks.scale（newX））；
gY.call（yTicks.scale（newY））；
svg
.选择（“轴线”）
.attr（“x1”，0）
.attr（“y1”，夹具（新（0），1，高度））
.attr（“x2”，宽度）
.attr（“y2”，夹具（新（0），1，高度））；
svg
.选择（“#ay行”）
.attr（“x1”，夹具（新的（0），1，宽度））
.attr（“y1”，0）
.attr（“x2”，夹具（新的（0），1，宽度））
.attr（“y2”，高度）；
}
};
let container=document.querySelector（“.container”）；
let plot=plot（容器）；