CODEWITHSUNDEEP
javascripthtmld3.jssvg
S.Dan
S.Dan

Reputation: 1930

d3 append img to li

I'm trying to append an image in front of each text in a li element which is inside foreignObject of svg.

When I hardcode the <img> in the li (Chil9), it is displayed correctly, but not when appended with d3. What went wrong in this?

This is actually a part of a huge code - reduced to get a simple working code.

UPDATE: Apparently, when the text is set first and then the img is appended, it appears correct. But I wish to get the image on the left of the text. (Using float:left causes the other CSS properties - such as the tree structure and collapsible icons - so is there a work around?)

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>

Upvotes: 1

Views: 696

Answers (1)

Michael Rose
Michael Rose

Reputation: 7820

Instead of using node.text(...) wrap the text inside a span element and append it after the image has been appended - see the example below.

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>

Upvotes: 2

Related Questions