javascript - 在 d3 圆圈内添加带有换行符的 html 内容

Question

是否可以在 d3 中添加 html 内容而不是附加文本。在以下代码中，

 circle.append("circle")
                              .attr("cx", 65)
                              .attr("cy", 65)
                              .attr("r", 65)
                              .attr('fill','none')
                              .attr('stroke','#008080')
                              .attr('class','ourmission')
    circle.append('text')
                              .attr('x', 65)
                              .attr('y',65)
                              .attr('dx',65)
                              .text(function(d){
                              return d.Some_Value+"<br/>"+d.Some_OtherValue
                                             })

我已经附加了文本，因为我需要根据某些条件动态地向我的文本添加换行符，我需要添加 html 内容而不是文本。如果我没记错的话，我认为附加文本不可能换行符。

我需要做这样的事情，

  .html(function(d){
      return d.Some_Value+"<br/>"+d.Some_OtherValue
               })

Answer 1

您可以使用 <foreignObject> 来完成元素。

The foreignObject SVG element allows for inclusion of a foreign XML namespace which has its graphical content drawn by a different user agent. The included foreign graphical content is subject to SVG transformations and compositing.

看下面的演示:

var svg = d3.select("#root")
  .append("svg")
  .attr("width", 210)
  .attr("height", 210);

svg.append("circle")
  .style("stroke", "gray")
  .style("fill", "white")
  .attr("r", 100)
  .attr("cx", 105)
  .attr("cy", 105)

svg
  .data([{ foo: 'foo', bar: 'bar' }])
  .append("foreignObject")
  .attr("x", 60)
  .attr("y", 60)
  .attr("width", 100)
  .attr("height", 100)
  .html(function(d) {
    return '<div style="border:1px solid">' + d.foo + '</br>' + d.bar + '</div>'
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
<div id="root"></div>