Javascript D3:无法将简单路径附加到svg容器

我没有成功地在一个简单的svg容器上添加路径。 它将我的“path”元素视为文本

这是我的密码：

//创建SVG
var tracer={}；
tracer.$container=document.getElementById（'container'）；
tracer.$svg=$（''）；
tracer.$container.append（tracer.$svg）；
//指定路径点
var pathInfo=[{x:0，y:60}，
{x:50，y:110}，
{x:90，y:70}，
{x:140，y:100}]；
//指定用于生成路径数据的函数
var pathLine=d3.line（）
.x（函数（d）{返回d.x；}）
.y（函数（d）{返回d.y；}）
.曲线（d3.曲线基）；
//附加路径
tracer.$svg.append（“路径”）
.attr（“d”，路径线（路径信息））
.attr（“笔划”、“白色”）
.attr（“笔划宽度”，8）
.attr（“填充”、“无”）

正如其他人在评论中指出的，避免将

jquery

和

d3

混用

问题的根源在于，

跟踪器。$svg

是一个jquery选择器，但您将其视为一个

d3

选择器。虽然它们都有一个

append

方法，但它们是两个完全不同的野兽（正如@altocumulus所指出的，jquery在操作上没有那么好）

这是我用d3编写的代码：

//创建SVG
var tracer={}；
tracer.$container=d3.选择（“#container”）；
tracer.$svg=tracer.$container.append（“svg”）
.attr（“类”、“svg-d3-table”）
.样式（“宽度”、“100%”）
.样式（“高度”、“100%”）；
//指定路径点
变量路径信息=[{
x:0,，
y:60
}, {
x:50，
y:110
}, {
x:90，
y:70
}, {
x:140，
y:100
}];
//指定用于生成路径数据的函数
var pathLine=d3.line（）
.x（功能（d）{
返回d.x；
})
.y（功能（d）{
返回d.y；
})
.曲线（d3.曲线基）；
//附加路径
tracer.$svg.append（“路径”）
.attr（“d”，路径线（路径信息））
.attr（“笔划”、“白色”）/多亏了高积云：


这正是我想要更好地理解操作DOM的信息（但仍然向我展示了前端开发可以做多少）

感谢Gerardo Furtado：

事实上，对不同lib的需求很容易导致混淆行为，并使JS在处理现有项目时难以处理（如何通过读取代码来确定名称空间，避免冲突…）

我通过使用D3管理svg解决了我的问题，正如您所建议的：
tracer.$svg=tracer.capsule.$svg=d3.选择（“#”+tracer.defaultName）
.append（“svg”）
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）
.attr（“id”，tracer.defaultName+“-svg”）
.attr（“类”、“svg-d3-table”）
.attr（“xmlns”）http://www.w3.org/2000/svg");在处理SVG时不要使用jQuery。它不是用来处理SVG名称空间的，可能是许多令人头痛的问题的根源。下面更详细地描述了您的问题：。这种d3、jQuery和vanilla js的混合非常尴尬和混乱。。。为什么不只使用d3创建SVG？