blocks|key|2479741|text|text+svg元素不会呈现html。为了在svg中呈现html，您需要首先附加一个foreignObject。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2479742|此外，circle元素不能有任何子元素，因此您需要将元素附加到圆的旁边。|2479743|试试这个：|2479744|​|2479745|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});|code-block|syntax|javascript|2479746|<script+src="https://d3js.org/d3.v5.min.js"></script>
<svg+width="300"+height="300"></svg>|2479747|2479748|entityMap^0|0|4|E|4|M|3|S|4|16|D|0|3|6|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|19|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1A|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1B|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|N|7|1C|8|@]|D|@]|E|$O|P]]|$1|S|3|K|5|6|7|1D|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|U|$]]

<p>The <code>text</code> svg element won't render <code>html</code>. In order to render <code>html</code> within the <code>svg</code>, you'll need to append a <code>foreignObject</code> first. </p>

<p>Additionally, the <code>circle</code> element can't have any children so you'll need to append the element next to the circle.</p>

<p>Try this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var nodes = [
    {
      "group": 3,
      "id": "école féminin ou masculin",
      "label": "école &lt;b&gt;féminin ou masculin&lt;/b&gt;"
    }
]

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});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;
&lt;svg width="300" height="300"&gt;&lt;/svg&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2368035|text|如果您可以修改dataset的结构，那么我建议您使用带有多个tspan元素的text元素来设置标签每个部分的不同样式。下面是一个简化的示例(如果您的标签样式比您提供的示例更复杂，那么您需要修改下面的方法来附加tspan，但这应该会为您指明正确的方向)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2368036|​|2368037|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);|code-block|syntax|javascript|2368038|<body>
++<script+src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
</body>|2368039|2368040|entityMap^0|U|5|12|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>If you can modify the structure of your dataset, then I would suggest using a <code>text</code> element with multiple <code>tspan</code> elements to style each part of the label differently. 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).</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; d.x)
  .attr('cy', d =&gt; d.y)
  .attr('style', 'fill: rgb(102, 193, 163);');
  
labels
  .attr('x', d =&gt; d.x)
  .attr('y', d =&gt; d.y)
  .append('tspan')
  .text(d =&gt; d.tspans[0].text)
  .attr('style', d =&gt; d.tspans[0].style);
  
labels
  .append('tspan')
  .text(d =&gt; d.tspans[1].text)
  .attr('style', d =&gt; d.tspans[1].style);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>


<p>How to display JSON data formatted with HTML in d3 node label?</p>

<p>HTML formatting is different for each label:</p>

<pre><code>"nodes": [
    {
      "group": 3,
      "id": "école féminin ou masculin",
      "label": "école &lt;b&gt;féminin ou masculin&lt;/b&gt;"
    }
]
</code></pre>

<p>This does not work, what is between the  tags is not displayed while in the source code it appears:</p>

<pre><code>var text = node.append('text').html(function(d) {return d.label;});
</code></pre>

<p>Source code result:</p>

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

<p>What is displayed:</p>

<p><a href="https://i.stack.imgur.com/cfg6F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cfg6F.png" alt="enter image description here"></a></p>


d3 node labeling: how to display JSON data formatted with HTML?

JSON

如何在d3节点标签中显示HTML格式的JSON数据？每个标签的HTML格式都不同："nodes": [    {      "group": 3,      "id": "école féminin ou masculin",      "label": "école <b>féminin ou masculin</b...

问d3节点标签:如何显示用HTML格式化的数据？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问d3节点标签:如何显示用HTML格式化的数据？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问d3节点标签:如何显示用HTML格式化的数据？
EN