Question

我是Javascript和JQuery的新手，我遇到的问题是我认为很简单。我正在创建一个由单个html页面，一个css样式表和一个Javascript文件组成的网站，该文件从某个地方检索数据并使用d3.js绘制网络。我的html中有一个SVG元素，我需要从Javascript访问以更改其属性并在其中绘制。我最初在我的JQuery中创建了SVG元素，并将返回值保存为我稍后可以使用的变量。但是，这有点难看，因为每次我想绘制新网络时都必须删除并重新添加SVG。

所以现在我已经将SVG元素添加到了html中，并且使得布局能够很好地适应窗口大小调整。但是，我似乎无法从JQuery轻松访问它。我试过这样的事情：

var svg = document.getElementById("svg");
svg.attr("viewBox", "0 0 " + w + " " + h)
            .attr("preserveAspectRatio", "XMidYMid")
            .attr("width", w)
            .attr("height", h);

然而，在svg.attr(...)，我得到错误“TypeError：'undefined'不是一个函数（评估'svg.attr（”viewBox“，”0 0“+ w +”“+ h）' ）”。

我还尝试在我使用$("#svg")变量的每个地方使用svg。但是，这给了我错误“TypeError：'undefined'不是一个函数（评估'$（”＃svg“）。append（”svg：defs“）。selectAll（”marker“）'）”。奇怪的是，函数调用之前，

$("#svg").attr("viewBox", "0 0 " + w + " " + h)
        .attr("preserveAspectRatio", "XMidYMid")
        .attr("width", w)
        .attr("height", h);

......跑得很好。

我不确定我是否将d3语法与JQuery和Javascript语法混淆，但在我看来，这似乎是一个在Javascript变量中保存html元素的简单问题。这是正常的事吗？如果是这样，那么正确的语法是什么？如果没有，我应该做什么呢？

Answer 1

那是因为attr()是jQuery method，你第一次没有在jQuery对象上调用它。

Answer 2

.attr 是一个jQuery方法

在第一种情况下，元素是DOM element。所以attr will fail

var svg = document.getElementById("svg");
// svg is s DOM element
// no support for .attr here unless you convert this to jQuery object
//  $(svg)

$("#svg")
// jQuery object

Answer 3

搞定了！所以这里有两个问题......因为我不知道我实际上在处理三种物体。然后我试图在那些没有为它们定义的对象上调用函数。

1）正如Zenith和Sushanth指出的那样，我试图在getElementById返回的DOM元素上调用jQuery函数。要解决这个问题，我可以使用$("#svg")而不是变量来调用jQuery函数，或者我可以通过执行var $svg = ($svg);将我的DOM元素变量转换为jQuery对象变量，然后将其引用为{{ 1}}。

2）正如Felix Kling指出的那样，我在jQuery对象上调用了D3函数$svg。要解决此问题，我必须将selectAll替换为$("#svg").append("svg:defs").selectAll(...)

感谢您的帮助！

在JQuery中将元素保存为变量

3 个答案: