d3节点标签:如何显示用HTML格式化的数据？
d3节点标签:如何显示用HTML格式化的数据？
提问于 2018-07-27 03:14:12
如何在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>显示的内容：
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-28 11:16:46
如果您可以修改dataset的结构，那么我建议您使用带有多个tspan元素的text元素来设置标签每个部分的不同样式。下面是一个简化的示例(如果您的标签样式比您提供的示例更复杂，那么您需要修改下面的方法来附加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>
Stack Overflow用户
发布于 2018-07-27 03:54:46
text svg元素不会呈现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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51546058
复制相关文章
相似问题