我试图在 li 元素中的每个文本前面附加一个图像,该元素位于 svg 的 foreignObject 中。
当我对 <img>
进行硬编码时在 li (Chil9) 中,它显示正确,但在附加 d3 时显示不正确。这其中出了什么问题?
这实际上是一个巨大代码的一部分 - 减少以获得一个简单的工作代码。
更新:显然,当先设置文本然后附加 img 时,它看起来是正确的。但我希望获得文本左侧的图像。 (使用 float:left 会导致其他 CSS 属性 - 例如树结构和可折叠图标 - 那么有解决办法吗?)
drawListNode(d3.select("#tryme"), "appendedtext - no image!!", "object", []);
function drawListNode(parent, text, type, dotposition) {
var node = parent.append("li");
var icon_src = "https://4.bp.blogspot.com/-2cA0JJnfXaU/V7rAi-XlMFI/AAAAAAAAAx8/vslyEoZ41WYJ_USNqijaIuShAo3_XFehwCLcB/s1600/arrow-head.png";
node.text(text);
var m = node.append("img").attr("src", icon_src);
console.log(m);
return node;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg class="canvas" width="1800" height="500">
<g id="input-container" transform="translate(0,0)">
<foreignObject x="20" y="10" width="200" height="400" id="input-container-fo" class="container-fo">
<div xmlns="http://www.w3.org/1999/xhtml" id="input-container-div" class="contaisner-div">
<div class="container-div-title" id="input-container-div-title">Input</div>
<ul class="collapsiggbleList">
<li>
1Parent item
<ul id="tryme">
<li>2Child item</li>
<li>3Child item</li>
<li>
4Child - child
<ul>
<li>5Child ojdksjdksjd</li>
</ul>
</li>
<li>6jdkhjhsdh</li>
</ul>
</li>
<li>
7Parent item
<ul>
<li>8Child item</li>
<li>
<img src="https://4.bp.blogspot.com/-2cA0JJnfXaU/V7rAi-XlMFI/AAAAAAAAAx8/vslyEoZ41WYJ_USNqijaIuShAo3_XFehwCLcB/s1600/arrow-head.png">9Child item</li>
</ul>
</li>
</ul>
</div>
</foreignObject>
</g>
</svg>
最佳答案
而不是使用 node.text(...)
将文本包装在 span
元素中并将其附加到 图像之后附加 - 请参见下面的示例。
drawListNode(d3.select("#tryme"), "appendedtext - no image!!", "object", []);
function drawListNode(parent, text, type, dotposition) {
var node = parent.append("li");
var icon_src = "https://4.bp.blogspot.com/-2cA0JJnfXaU/V7rAi-XlMFI/AAAAAAAAAx8/vslyEoZ41WYJ_USNqijaIuShAo3_XFehwCLcB/s1600/arrow-head.png";
var m = node.append("img").attr("src", icon_src);
node.append("span").text(text);
console.log(m);
return node;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg class="canvas" width="1800" height="500">
<g id="input-container" transform="translate(0,0)">
<foreignObject x="20" y="10" width="200" height="400" id="input-container-fo" class="container-fo">
<div xmlns="http://www.w3.org/1999/xhtml" id="input-container-div" class="contaisner-div">
<div class="container-div-title" id="input-container-div-title">Input</div>
<ul class="collapsiggbleList">
<li>
1Parent item
<ul id="tryme">
<li>2Child item</li>
<li>3Child item</li>
<li>
4Child - child
<ul>
<li>5Child ojdksjdksjd</li>
</ul>
</li>
<li>6jdkhjhsdh</li>
</ul>
</li>
<li>
7Parent item
<ul>
<li>8Child item</li>
<li>
<img src="https://4.bp.blogspot.com/-2cA0JJnfXaU/V7rAi-XlMFI/AAAAAAAAAx8/vslyEoZ41WYJ_USNqijaIuShAo3_XFehwCLcB/s1600/arrow-head.png">9Child item</li>
</ul>
</li>
</ul>
</div>
</foreignObject>
</g>
</svg>
关于javascript - d3 附加 img 到 li,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39717436/