D3节点标记:如何显示用HTML格式的JSON数据?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (263)

如何在d3节点标签中以HTML格式显示JSON数据?

"nodes": [
    {
      "group": 3,
      "id": "école féminin ou masculin",
      "label": "école <b>féminin ou masculin</b>"
    }
]

这不起作用,在它出现的源代码中不显示标签之间的内容:

var text = node.append('text').html(function(d) {return d.label;});

源代码结果:

<g class="nodes">
    <circle r="25" style="fill: rgb(102, 193, 163); /*! touch-action: none; */" cx="417.29708547093924" cy="425.4471792945814"></circle>
    <text x="417.29708547093924" y="425.4471792945814">école <b>féminin ou masculin</b></text>
</g>

结果:

提问于
用户回答回答于

如果你可以修改数据集的结构,那么我建议使用具有多个tspan元素的文本元素来不同地设置标签的每个部分的样式。 下面是一个简化的示例(如果您的标签样式比你提供的示例更复杂,那么你需要修改以下方法来附加tspans,但这应该指向正确的方向)。

const nodes = [{
  "group": "3",
  "x": "30",
  "y": "30",
  "id": "école féminin ou masculin",
  "tspans": [
    {"text": "école ", "style": "font-weight: normal;"},
    {"text": "féminin ou masculin", "style": "font-weight: bold;"}
  ]
}];

const svg = d3.select('body')
              .append('svg')
              .attr('width', 300)
              .attr('height', 300);

const circles = svg.selectAll('circle')
                   .data(nodes)
                   .enter()
                   .append('circle');
                   
const labels = svg.selectAll('text')
                  .data(nodes)
                  .enter()
                  .append('text');

circles
  .attr('r', 25)
  .attr('cx', function (d) { return d.x; })
  .attr('cy', function (d) { return d.y; })
  .attr('style', 'fill: rgb(102, 193, 163);');
  
labels
  .attr('x', function (d) { return d.x; })
  .attr('y', function (d) { return d.y; })
  .append('tspan')
  .text(function (d) { return d.tspans[0].text; })
  .attr('style', function (d) { return d.tspans[0].style; });
  
labels
  .append('tspan')
  .text(function (d) { return d.tspans[1].text; })
  .attr('style', function (d) { return d.tspans[1].style; });
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
</body>

用户回答回答于

textSVG元素不会呈现html。为了在svg中呈现html,你需要首先附加一个foreignObject。

此外,circle元素不能包含任何子元素,因此你需要将元素附加到圆圈旁边。

尝试这个:

var nodes = [
    {
      "group": 3,
      "id": "école féminin ou masculin",
      "label": "école <b>féminin ou masculin</b>"
    }
]

var svg = d3.select("svg");

var nodes = svg.selectAll("g").data(nodes);

var node = nodes.enter().append("g");

node
  .append("circle")
  .attr("r", 25)
  .attr("cx", 30)
  .attr("cy", 30)
  .attr("style", "fill: rgb(102, 193, 163)");

  node
  .append('foreignObject')
  .append("xhtml:div")
  .html(function(d) {return d.label});
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg width="300" height="300"></svg>

扫码关注云+社区

领取腾讯云代金券