javascript - 在 D3.js 中设置特定文本的样式

Question

我想对属性“fonction”和“nom”设置不同的样式，但我真的不知道从哪里开始。我可能不需要“fonction”的任何特定样式，但是对于“nom”，我希望文本加粗并且颜色与属性“type”相同。

{    
  "fonction": "blah1",
  "nom": "wah1",
  "type": "green", 
  "level": "green"
},   
{    
  "fonction": "blah2",
  "nom": "wah2",
  "type": "yellow", 
  "level": "yellow"
}

以下是用于附加文本的部分代码:

var nodeEnter = node.enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { return "translate(" + source.y0 + 
           "," + source.x0 + ")"; })
          .on("click", click);
           nodeEnter.append("circle")  
          .attr("r", function(d) { return d.value; })
          .style("stroke", function(d) { return d.type; })
          .style("fill", function(d) { return d.level; });

          nodeEnter.append("text")
         .attr("x", function(d) { return d.children || d._children ? -13 : 13; 
         })
         .attr("dy", ".35em")
         .attr("text-anchor", function(d) { return d.children || d._children ? 
         "end" : "start"; })
         .text(function(d) { return d.fonction + " " + d.nom; })
         .style("fill-opacity", 1e-6);

我在这里使用了我在这里提出的另一个问题所使用的代码，这样它们就不会混合在一起。

无法找到一种方法来告诉 D3 仅设置“nom”样式，因为这两个属性都具有“text”类型。如果您能提供一些研究方向，我将非常感激。

非常感谢。

Answer 1

如果您想对不同的文本应用不同的样式，则不能使用相同的 text() 附加它们方法，就像你正在做的那样:

.text(function(d) { return d.fonction + " " + d.nom; })

你必须将它们分开。例如，使用 <span> :

.text(function(d){ return d.fonction + " ";})
.append("span")
.text(function(d){ return d.nom;});

这是一个使用数据数组的非常简单的演示:

var data = [{
  "fonction": "blah1",
  "nom": "wah1",
  "type": "green",
  "level": "green"
}, {
  "fonction": "blah2",
  "nom": "wah2",
  "type": "yellow",
  "level": "yellow"
}];

d3.select("body")
  .selectAll(null)
  .data(data)
  .enter()
  .append("p")
  .style("color", "red")
  .text(function(d) {
    return d.fonction + " ";
  })
  .append("span")
  .style("color", "blue")
  .text(function(d) {
    return d.nom;
  });

<script src="https://d3js.org/d3.v4.min.js"></script>