d3节点标签：如何显示用HTML格式化的JSON数据？
[英]d3 node labeling: how to display JSON data formatted with HTML?
问题描述
How to display JSON data formatted with HTML in d3 node label? 
如何在d3节点标签中显示以HTML格式格式化的JSON数据？
HTML formatting is different for each label: 每个标签的HTML格式均不同：
"nodes": [
{
"group": 3,
"id": "école féminin ou masculin",
"label": "école <b>féminin ou masculin</b>"
}
]
This does not work, what is between the tags is not displayed while in the source code it appears: 这不起作用，标签之间的内容在源代码中显示时不会显示：
var text = node.append('text').html(function(d) {return d.label;});
Source code result: 源代码结果：
<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>
What is displayed: 显示内容：
2 个解决方案
解决方案1
2 已采纳 2018-07-28 03:16:46
If you can modify the structure of your dataset, then I would suggest using a text element with multiple tspan elements to style each part of the label differently. 如果可以修改数据集的结构，则建议使用带有多个tspan元素的text元素，以不同的方式设置标签的每个部分。 Below is a simplified example (if your label styling is more complex than the example you provided, then you would need to modify the below approach to appending the tspans, but this should point you in the right direction). 下面是一个简化的示例（如果标签样式比您提供的示例更复杂，则您需要修改以下方法来附加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 => dx) .attr('cy', d => dy) .attr('style', 'fill: rgb(102, 193, 163);'); labels .attr('x', d => dx) .attr('y', d => dy) .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>
解决方案2
1 2018-07-26 19:54:46
The text svg element won't render html . text svg元素不会呈现html 。 In order to render html within the svg , you'll need to append a foreignObject first. 为了在svg呈现html ，您需要先附加一个foreignObject 。
Additionally, the circle element can't have any children so you'll need to append the element next to the circle. 此外， circle元素不能有任何子元素，因此您需要将元素添加到圆旁边。
Try this: 尝试这个：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.