Appended Text Not Showing In D3 V4

I am trying to 'translate' parallel coordinates example to the new version of d3 v4. I have a working example with this javascript (which additionally is a good example if anyone i

Solution 1:

In D3 v4 the axis component will explicitly set the fill to none on the selection it is called for. From the source code:

selection.filter(entering)
    .attr("fill", "none")      //<=== Fill settononeby D3
    .attr("font-size", 10)
    .attr("font-family", "sans-serif")
    .attr("text-anchor", orient ===right ? "start" : orient ===left ? "end" : "middle");

This will create the following code:

in contrast to the code generated by v3:

The <text> elements will inherit these properties, because they are children of these groups, whereby hiding the texts.

To show the labels you need to explicitly style them, which can be done

1. Via CSS:

   .axis text {
     fill:black;   /* <== Set the fill */text-shadow: 01px0#fff, 1px00#fff, 0 -1px0#fff, -1px00#fff;
     cursor: move;
   }
   

   Working demo.

2. By setting the fill attribute on the <text> element itself:

   .append("text")
     .attr("fill", "black")          // <=== Set the fill//  .style("fill", "black")       // Will also work when using .style()
     .style("text-anchor", "middle")
     .attr("y", -9) 
     .text(function(d) { return d; });
   

   Working demo.