d3將img添加到li

我正在嘗試在svg的foreignObject內部的li元素中的每個文本前添加一個圖像。d3將img添加到li

當我在li（Chil9）中對<img>進行硬編碼時，它會正確顯示，但不會在附加了d3時顯示。這有什麼問題？

這實際上是一個龐大的代碼的一部分 - 減少以獲得一個簡單的工作代碼。

UPDATE：顯然，當文本先設置，然後附加img後，它看起來是正確的。但我希望在文本的左側顯示圖像。（使用浮動：左導致其他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>

來源

2016-09-27 SachiDangalla

而不是使用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>

來源

2016-09-27 06:43:40

是它的工作。記住一點很重要。 – SachiDangalla

d3將img添加到li

回答

相關問題