如何在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>
显示的内容:
发布于 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>
发布于 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>
https://stackoverflow.com/questions/51546058
复制相似问题