CODEWITHSUNDEEP
javascriptd3.js
Plouf
Plouf

Reputation: 397

Style specific text in D3.js

I'd like to style differently the properties "fonction" and "nom" but I really don't know where to start. I probably won't need any specific style for "fonction" but, for "nom", I'd like to have the text bold and with the same color than the property "type".

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

Here is part of the code used to append text:

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);

I use here the code used for another question I asked here so they won't be mixed.

Can't find a way to tell D3 to style only "nom" as both properties have the "text" type. I'd be very grateful for some directions to look into.

Many thanks.

Upvotes: 1

Views: 7468

Answers (2)

spring
spring

Reputation: 18497

I'd suggest using CSS and test the data to determine which class to add dynamically. Something like:

newEvent.append("text")
    .attr('y', 5)
    .attr("x", 15)
    .attr("class", function(d, i) {
        // this will color all the 'odd' numbered
        // text elements "blue"
        if (i % 2 == 0){
             return "event-text"
         } else {
             return "event-text-blue"
         }
     })
     .text(function (d) {
         return d.eventText
     });

Don't know if that is the "best" way but it works.

CSS

.event-text {
    fill: white;
    text-shadow: 3px 2px gray;
    font-size: 16px;
    font-family: sans-serif;
}
.event-text-blue {
    fill: blue;
    text-shadow: 3px 2px gray;
    font-size: 16px;
    font-family: sans-serif;
}

Upvotes: 1

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

If you want to apply different styles to different texts, you cannot append them using the same text() method, as you're doing:

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

You have to separate them. For instance, using a <span>:

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

Here is a very simple demo using your data array:

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>

Upvotes: 1

Related Questions