Question

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

每个标签的HTML格式均不同：

"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>

显示内容：

Answer 1

如果您可以修改数据集的结构，那么我建议您使用带有多个text元素的tspan元素来对标签的每个部分进行不同的样式设置。下面是一个简化的示例（如果标签样式比您提供的示例更复杂，则您需要修改以下方法来附加tspan，但这应该为您指明正确的方向）。

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', d => d.x)
  .attr('cy', d => d.y)
  .attr('style', 'fill: rgb(102, 193, 163);');
  
labels
  .attr('x', d => d.x)
  .attr('y', d => d.y)
  .append('tspan')
  .text(d => d.tspans[0].text)
  .attr('style', d => d.tspans[0].style);
  
labels
  .append('tspan')
  .text(d => d.tspans[1].text)
  .attr('style', d => d.tspans[1].style);

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
</body>

Answer 2

text的svg元素不会呈现html。为了在html中呈现svg，您需要先附加一个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>

d3节点标签：如何显示使用HTML格式化的JSON数据？

2 个答案: