因此，我将 d3 与 jquery 一起使用来加载将充当弹出窗口的模板。我拥有的是多个相同的按钮，每个按钮都会触发此功能并显示带有指定文本的弹出窗口。
function(d, i){
var x = d3.select("body")
.append("div")
.attr("id", "x" + i);
$("#x" + i).load("template.html", function(){ $("#textBox").text(data)});
}
使用模板:
<html>
<div id="textBox"></div>
</html>
d3.select.append 正在按预期工作。每次单击不同的按钮时，都会创建一个具有相关 id 的新 div。然而，每次调用 .load() 时，文本都会加载到创建的第一个 div 中，而不是加载到具有指定 id 的 div 中。我相信我误解了 .load() 的工作原理，.load 的回调函数是否正在寻找“#textBox”的第一个实例？如果是这样，是否可以在模板中定义动态 ID？
第一次点击:
<div id = "x1">
<div id="textBox">data1</div>
</div>
第二次点击:
<div id = "x1">
<div id="textBox">data2</div>
</div>
<div id = "x2">
<div id="textBox"></div>
</div>
感谢您的宝贵时间
最佳答案
您误解了 HTML 的工作原理，而不是 load 。 id 属性代表标识符，其中 has to be unique in a document 。所以答案既不是关于 jQuery，也不是关于 D3。
您需要将 textBox 从 id 属性值更改为 class 属性值。回调中的选择器将更改为 '#x' + i + ' .textBox'。
关于javascript - 使用 jquery/d3 动态重用模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27159678/