来自csv的D3_位置坐标

我无法从csv渲染数据。 我需要根据文本元素在X和Y坐标下的位置来渲染它们

首先，我测试了如何使用这种代码内联方式呈现数据：

let dataset=[{x:100, y:100, text:"test1"},{x:120, y:120, text:"test2"},{x:140, y:140, text:"test3"}]

它工作正常，所以我决定用csv文件中的相同数据绑定csv文件，现在控制台中出现以下错误：

uncaughttypeerror:cannotreadproperty'length'of undefined

让svg=d3.选择（“雪花”）
let数据集；
//加载和处理数据
d3.csv（“https://gist.githubusercontent.com/dsibi/f5ca8cd7cd84eaa3c863c6ba247bf235/raw/9f934b89571e3b63621ecc03ae7f0bc805d5d5b3/labels_pos.csv，函数（数据）{
data.forEach（函数（d）{
d、 x=+d.x；
d、 y=+d.y；
});
数据集=数据；
});
/*让dataset=[{x:100，y:100，文本：“test1”}，{x:120，y:120，文本：“test2”}，{x:140，y:140，文本：“test3”}]*/
d3.选择（“标签”）
.append（'svg'）
.selectAll（“文本”）
.数据（数据集）
.输入（）
.append（“文本”）
.attr（“x”，d=>d.x）
.attr（“y”，d=>d.y）
.text（d=>d.text）
d3.选择（“.ss”）
.on（“鼠标悬停”，函数（）{
d3.选择（本）
.transition（）
.持续时间（250）
.样式（“填充”、“橙色”）；
d3.选择（“工具提示”）
.style（“左”（d3.event.pageX+10）+“px”）
.style（“顶部”（d3.event.pageY+10）+“px”）
.text（“滑冰技能”）
.transition（）
.期限（250）；
d3.选择（“工具提示”）
.分类（“隐藏”，虚假）；
d3.选择（“标签”）
.transition（）
.期限（250）；
d3.选择（“标签”）
.分类（“隐藏”，虚假）；
d3.选择（“标签1”）
.style（“左”、“680px”）
.样式（“顶部”、“60px”）
.text（“功率、速度和加速度的不同使用”）
.transition（）
.期限（250）；
d3.选择（“标签1”）
.分类（“隐藏”，虚假）；
})
.on（“mousemove”，function（）{
d3.选择（“工具提示”）
.style（“左”（d3.event.pageX+10）+“px”）
.style（“顶部”（d3.event.pageY+10）+“px”）
})
.on（“mouseout”，函数（）{
d3.选择（本）
.transition（）
.持续时间（250）
.样式（“填充”、“钢蓝”）；
d3.选择（“#工具提示”）.classed（“隐藏”，true）；
d3.选择（“#标签”）.classed（“隐藏”，true）；
d3.选择（“#标签1”）.classed（“隐藏”，真）；
});
body，
h1，
h2，
h3，
h4，
P
a{
保证金：0；
字体大小：100%；
字体大小：正常；
}
.覆盖{
宽度：100%；
身高：100%；
}
.pcs_标题{
字体大小：14px；
字号：500；
边缘顶部：10px；
边缘底部：10px；
文本对齐：居中；
字体系列：“Helvetica”，“Arial”，无衬线；
}
1.路政署大楼{
/*显示器：flex*/
/*对齐项目：居中*/
/*背景色：#F5CCCC*/
宽度：100%；
高度：600px；
填充：20px；
}
.雪花{
/*左侧填充：25px*/
显示：块；
左边距：自动；
右边距：自动；
身高：100%；
填充：钢蓝；
}
/*.雪花：悬停{
填充物：棕色；
} */
#工具提示{
位置：绝对位置；
宽度：90px；
高度：自动；
填充：10px；
背景色：白色；
-webkit边界半径：10px；
-moz边界半径：10px；
边界半径：10px；
-webkit盒阴影：4px4x10pxRGBA（0,0,0,0.4）；
-moz盒阴影：4px4x10pxRGBA（0,0,0,0.4）；
盒影：4px4x10pxRGBA（0,0,0,0.4）；
指针事件：无；
}
#工具提示。隐藏{
显示：无；
}
#工具提示{
保证金：0；
字体系列：无衬线；
字体大小：16px；
线高：20px；
}
#标签{
位置：绝对位置；
}
#标签。隐藏{
显示：无；
}
#标签1{
位置：绝对位置；
}
#标签1.1隐藏{
显示：无；
}

d3.csv
是一个异步函数。它请求一些外部数据源，但仅在回调完成时执行回调。同时，它允许执行其他代码。在本例中，您尝试在加载基础数据之前绘制标签

在图表中：

d3请求外部数据源
->
您尝试插入标签
->
d3设置数据集

在下面的代码中，您的设置仍然有很多错误，但是错误已经消失，您可以看到
#labels
现在有一个
svg
子节点，它有三个
文本
节点


让svg=d3.选择（“雪花”）
let数据集；
//加载和处理数据
d3.csv（“https://gist.githubusercontent.com/dsibi/f5ca8cd7cd84eaa3c863c6ba247bf235/raw/9f934b89571e3b63621ecc03ae7f0bc805d5d5b3/labels_pos.csv，函数（数据）{
data.forEach（函数（d）{
d、 x=+d.x；
d、 y=+d.y；
});
数据集=数据；
d3.选择（“标签”）
.append（'svg'）
.selectAll（“文本”）
.数据（数据集）
.输入（）
.append（“文本”）
.attr（“x”，d=>d.x）
.attr（“y”，d=>d.y）
.text（d=>d.text）
d3.选择（“.ss”）
.on（“鼠标悬停”，函数（）{
d3.选择（本）
.transition（）
.持续时间（250）
.样式（“填充”、“橙色”）；
d3.选择（“工具提示”）
.style（“左”（d3.event.pageX+10）+“px”）
.style（“顶部”（d3.event.pageY+10）+“px”）
.text（“滑冰技能”）
.transition（）
.期限（250）；
d3.选择（“工具提示”）
.分类（“隐藏”，虚假）；
d3.选择（“标签”）
.transition（）
.期限（250）；
d3.选择（“标签”）
.分类（“隐藏”，虚假）；
d3.选择（“标签1”）
.style（“左”、“680px”）
.样式（“顶部”、“60px”）
.text（“功率、速度和加速度的不同使用”）
.transition（）
.期限（250）；
d3.选择（“标签1”）
.分类（“隐藏”，虚假）；
})
.on（“mousemove”，function（）{
D