d3 append img to li

Question

Я пытаюсь добавить изображение перед каждым текстом в элементе li, который находится внутри foreignObject из svg.

Когда я кодирую <img> в li (Chil9), он отображается правильно, но не при добавлении с 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>

Answer 1

Вместо использование 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>