d3.js text is not getting styled

Question

My text is not getting styled. I set 'stroke-opacity' to 0.1 both in my javascript:

// NEW add text labels    
d3.select("#plot").selectAll(".groupText") //???? ".nodeText"
    .data(nodes)
    .enter()
    .append("text")
    .attr("class", "groupText")
    .attr("dy", ".31em")
    .attr("transform", function(d) { return "translate(" + (d.x) + ", " + (d.y) + ")rotate(" + (d.x < 0 ? rotationScale(-d.y) : rotationScale(d.y)) + ")translate(" + (d.x < 0 ? (52) : (-52)) + ", " + 0 + ")"})
    //          sets the origin of rotation to the node's location ^^^^^^^^^^        ^^rotates the label for right half the other way round then the left half      ^^and shifts the label a bit from the circle
    .style("text-anchor", function(d) { return d.x > 0 ? "start" : "end"; })
    //.style("text_anchor", "bottom")
    .text(function(d) { return d.name.split("_")[0]; })
    .style("stroke", "white")
    .style("stroke-opacity", 0.1);

and style sheet in html:

/* NEW --> */
.groupText {
    font: 300 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
    fill: rgb(90, 90, 90);
    font-weight: 400;
    stroke-opacity: 0.1 !important;
}

but nothing works, as you can see from this picture: (it should apply on the text inside of the circle - the OP PIK...and so on)

enter image description here

Neither the color is working (the text is clearly not white)..

@XavierGuihot hmm, that seems to work... why though? And how would I set the color with this kind of styling? — Jame Stitel, Jul 29 '18 at 09:32
generally you should use 'fill' for text, and no stroke colour. Its a bit counter intuitive. The text is filled with rgb(90, 90, 90) as specified in your CSS, and a border stroke of white which you can't see. — Tom Shanley, Jul 30 '18 at 03:00

d3.js text is not getting styled

0 Answers0