是否可以使用 d3js 证明 SVG 文本的合理性？

Question

我正在使用 M.Bostock's wrap function 换行文本，但找不到证明它合理的方法。

在 d3 中甚至可能吗？如果没有，有没有办法"mimic"这种文本处理方式？

编辑：感谢 Logikos 的建议，我从 M.Bostock 中找到了 this example，在 svg 中放置了一个 foreignObject。

这是片段：

var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500);
svg.append("foreignObject")
    .attr("width", 480)
    .attr("height", 500)
  .append("xhtml:body")
    .style("font", "14px 'Helvetica Neue'")
    .html("<h1>An HTML Foreign Object in SVG</h1><p>Veeery long text");

那么你只需要在CSS中添加：

body {text-align: justify;
     text-align-last: start;
}

Answer 1

这不是您要找的东西，而是我几年前用过的东西。您可以使用 foreignObject 标签将 html 放入 svg 中，而不是使用该函数来模拟包装 - http://ajaxian.com/archives/foreignobject-hey-youve-got-html-in-my-svg

与 html 一样，您可以根据需要设置样式、文本换行、两端对齐等。

我已经 5 年多没有使用过 d3 或 SVG，所以很难记住，但我想我会分享这个以防万一它有用。

这是我上面发布的 link 中的示例标记：

< ?xml version="1.0" standalone="yes"?>
<svg xmlns = "http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="150" fill="gray"/>
  <foreignobject x="10" y="10" width="100" height="150">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>Here is a <strong>paragraph</strong> that requires <em>word wrap</em></div>
    </body>

  </foreignobject>

  <circle cx="200" cy="200" r="100" fill="blue" stoke="red"/>
  <foreignobject x="120" y="120" width="180" height="180">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>
        <ul>
          <li><strong>First</strong> item</li>

          <li><em>Second</em> item</li>
          <li>Thrid item</li>
        </ul>
      </div>
    </body>
  </foreignobject>
</svg>

请注意浏览器支持：http://caniuse.com/#search=foreignObject 这表示它适用于 Opera mini 以外的所有设备。虽然在 IE 和 Edge 中有一些限制：

1 IE11 and below do not support . 2 IE and Edge do not support applying SVG filter effects to HTML elements using CSS.

你应该在 IE 和 Edge 中检查一下，一个地方说不支持，另一个地方说有点支持...

是否可以使用 d3js 证明 SVG 文本的合理性？

Is it possible to justify SVG text using d3js?

svg

text

justify

text-justify

d3.js