D3 使用 X 行内图像附加文本答案

【问题标题】：D3 Append Text with X Inline ImagesD3 使用 X 行内图像附加文本
【发布时间】：2022-01-16 15:11:28
【问题描述】：

我想将可以包含 X 个内联图像的文本附加到 SVG。

这个想法是文本将从Test [img1] the total [img2] 插入到Test <img src="img1.png" /> the total <img src="img2.png" />。插值函数已按预期工作。

插入文本后，我希望它正确地附加到父 SVG。

目前，我有：

// Desc
nodeEnter.append("text")
    .text(d => parseDesc(d))
    .attr("y", 131)
    .attr("x", 7);

...

function parseDesc(d) {
   const interpolate = (string, values) => string.replace(/\[([^\]]*)\]/g, (match, offset) => {
      ...
   });
   ...
   return interpolate(d.data.description, replacements).replaceAll("\\n","<br/>").split('\n');
}

其中追加：

Test [object HTMLImageElement] the total [object HTMLImageElement]

给我的父母 SVG。

除了 [object HTMLImageElement] 标签之外，还有什么方法可以正确显示图像？

编辑：我曾考虑让 parseDesc 返回一个画布，但是，Canvas 元素也有同样的问题。返回 [object HTMLImageElement] 代替图像。我将用于画布追加的代码，如果更容易追加，将是：

// Desc
nodeEnter.append("svg:image")
   .attr("xlink:href", d => parseDesc(d))
   .attr("y", 131)
   .attr("x", 7);

...

function parseDesc(d) {
   const interpolate = (string, values) => string.replace(/\[([^\]]*)\]/g, (match, offset) => {
      ...
   });
   ...
   var canvas = document.createElement("canvas");
   canvas.width = 115;
   canvas.height = 65;

   var ctx = canvas.getContext('2d');
   ctx.font = "bolder 9.4pt";
   const x = 10;
   const y = 10;
   const lineheight = 1.6;
   const lines = interpolate(d.data.description, replacements).replaceAll("\\n","<br/>").split('\n');
   for (var i = 0; i<lines.length; i++)
      ctx.fillText(lines[i], x, y + (i * lineheight));

   return canvas.toDataURL();
}

然而，这种方法感觉更hacky。

【问题讨论】：

标签： javascript d3.js html5-canvas

【解决方案1】：

因为您是作为文本附加的，所以它会将 html 元素转换为字符串。你可以做的是附加一个foreignObject并使用.html，这应该将parseDesc返回的值附加为html，从而正确显示图像。

nodeEnter.append("foreignObject")
    .html(d => parseDesc(d))
    .attr("y", 131)
    .attr("x", 7);

Here 是一个最小的小提琴，显示它在 d3 svg 内的同一行中一起显示文本和图像的情况下工作。

【讨论】：