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内容而不是文本。如果没有错，我认为附加文本不能换行。< / p>

我需要做一些这样的事情，

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

Answer 1

您可以使用<foreignObject>元素执行此操作。

foreignObject SVG元素允许包含外部XML 命名空间，其图形内容由不同的用户绘制剂。包含的外国图形内容受SVG约束转换和合成。

请看下面的演示：

＆＃13;

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>'
  })

＆＃13;

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

＆＃13;

在d3圈内添加带换行符的html内容

1 个答案: