Question

我试图在svg的foreignObject内部的li元素中的每个文本前面附加一个图像。

当我对li（Chil9）中的<img>进行硬编码时，它会正确显示，但在附加d3时则不会显示。这出了什么问题？

这实际上是巨大代码的一部分 - 为了获得简单的工作代码而减少。

UPDATE：显然，首先设置文本然后附加img，它看起来是正确的。但我希望得到文字左侧的图像。（使用float：left会导致其他CSS属性 - 例如树结构和可折叠图标 - 所以有解决方法吗？）

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

不是使用node.text(...)将文本包装在span元素中，而是在附加图像后附加 - 请参阅下面的示例。

＆＃13;
＆＃13;
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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

d3将img附加到li

1 个答案: