0

我对 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' is not a function (evalating 'svg.attr("viewBox", "0 0" + w + " " + h)')"。

我还尝试在使用该变量$("#svg")的每个地方使用。svg但是，这给了我错误“TypeError: 'undefined' is not a function (evaluateing '$("#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 语法混淆了，但在我看来，将 html 元素保存在 Javascript 变量中是一个简单的问题。这是正常的事情吗？如果是这样，正确的语法是什么？如果没有，我应该怎么做？

4

3 回答 3

2

那是因为attr()它是一个jQuery 方法，而您第一次并没有在 jQuery 对象上调用它。

于 2013-06-07T23:28:25.267 回答
1

得到它的工作！所以这里有两个问题……都是因为我不知道我实际上是在处理三种对象。然后我试图在那些没有为它们定义的对象上调用函数。

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

2) 正如 Felix Kling 指出的那样，我selectAll在 jQuery 对象上调用 D3 函数。为了解决这个问题，我不得不替换$("#svg").append("svg:defs").selectAll(...)为 d3.select('#svg').append('defs').selectAll(...)

谢谢您的帮助！

于 2013-06-07T23:59:41.737 回答
1

.attr是一个 jQuery 方法

在第一种情况下，元素是 a 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
于 2013-06-07T23:29:25.697 回答