我查找了几个关于如何获得标题旁边的图像的教程，然而，它们是手动输入的小数据集。有近3000行数据，必须有一个更好的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" SameSite=None; Secure>
<title>Document</title>
<script
type="text/javascript"
src="https://d3js.org/d3.v3.js"
></script>
<style id="compiled-css" type="text/css">
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="static/js/app.js"></script>
<script></script>
</body>
</html>
我编辑代码和数据。我没有收到任何错误在vs code控制台，也不是http控制台。然而，文本出现在下拉菜单中，而不是图像。
d3.csv("https://raw.githubusercontent.com/Shannon-Goddard/grow_data/main/Resources/csv/ALL_data.csv", function(error, data) {
var select = d3.select("body")
.append("div")
.append("select")
select
.on("change", function(d) {
$("#idselector").select2();
var value = d3.select(this).property("value");
alert(value);
});
select.selectAll("option")
.data(data)
.enter()
.append("option")
.text(function (d) { return d.strain; })
.append(function(d) {
const logo = document.createElement('img');
logo.src = d.logo;
return logo;
});
});
没有错误在我的vs code控制台，也没有http控制台…
您的图像在那里，JavaScript只是不支持本地显示它们，并且Select2似乎配置错误。如果你在<option>元素上检查元素，你会在那里看到你的图像，但是Select2不知道渲染它们。使用Select2渲染图像的示例倾向于将图像数据隐藏到"data";属性，并使用客户templateSelection和templateResult渲染器检索它们。
虽然如果你删除Select2作为一个依赖关系，问题真的是一个副本如何在选择列表中添加图像?然而，这个问题相当古老，许多答案都过时了。
由于您的其他问题引用了jQuery，我建议尝试jQuery的SelectMenu与自定义渲染器。
https://jqueryui.com/selectmenu/custom_render
请特别注意带有"Select a person"的data-style示例;(例如"John Resig")，因为它使用了一些样式注入，所以你可以动态地将所有图像添加到HTML中作为样式标签的形式。
style: item.element.attr( "data-style" )
是从data-style="..."中提取的，但是要特别注意特殊的HTML转义，这在注入像这样的样式时是强制性的，比如'等。
<option value="1" data-class="avatar" data-style="background-image: url('http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&r=g&s=16');">John Resig</option>
为了简化这一点并避免一些丑陋的HTML转义，我建议您只将图像URL存储在data属性中(例如重命名为data-image)，并从JavaScript手动构建样式标签，例如style: "background-image: url('" + item.element.attr( "data-image" ) + "');"
为下拉菜单获得合适的图像大小和样式需要一些工作，但这正是jQuery SelectMenu的自定义渲染器的目的。如果您发现渲染不适合您的需要，这里建议使用一些非jquery的替代方案。