title: d3 Text color inside graph
body: <p>I am trying to control the color of a text inside a graph rendered by <code>d3</code>:</p>
  
  <p>Here is what I tried so far, in the bottom of my js code that creates the graph:</p>
  
  <pre><code>    d3.select('#gender_divide svg')
          .datum(datum)
          .transition().duration(500)
          .attr('width', 400)
          .attr('height', 400)
          .attr("fill","white")
          .attr('stroke', 'white')
          .call(chart);
  </code></pre>
  
  <p>This results in a white stroke around the text, but the text itself stays black, as you can see:</p>
  
  <p><img src="https://i.stack.imgur.com/5z8p6.png" alt="Graph with black text with a white stroke"></p>
  
  <p>Do you know how to change the text style inside the graph?</p>
  
  <h3>update the complete code:</h3>
  
  <pre><code> &lt;div id="gender_divide"&gt;&lt;svg style="width:350px;height:350px; body { color: white;}"&gt;  &lt;/svg&gt;&lt;/div&gt;
  
  &lt;script&gt;  
      data_gender_divide=[{"values": [{"value": 6.473124955585393, "label": "unknown"}, {"value": 71.34687526882524, "label": "men"}, {"value": 22.17999977558936, "label": "women"}], "key": "Serie 1"}];
  
      nv.addGraph(function() {
          var chart = nv.models.pieChart();
          chart.margin({top: 30, right: 60, bottom: 20, left: 60});
          var datum = data_gender_divide[0].values;
  
          chart.tooltipContent(function(key, y, e, graph) {
                      var x = String(key);
                      var y =  String(y)  + ' %';
  
                      tooltip_str = '&lt;center&gt;&lt;b&gt;'+x+'&lt;/b&gt;&lt;/center&gt;' + y;
                      return tooltip_str;
                  });
  
              chart.showLegend(false);
              chart.showLabels(true);
  
          chart.donut(false);
  
          chart
              .x(function(d) { return d.label })
              .y(function(d) { return d.value });
          chart.width(350);
          chart.height(350);
  
          d3.select('#gender_divide svg')
              .datum(datum)
              .transition().duration(500)
              .attr('width', 400)
              .attr('height', 400)
              .call(chart);
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is a working jsfiddle : <a href="http://jsfiddle.net/oz123/QyrwC/8/" rel="nofollow noreferrer">http://jsfiddle.net/oz123/QyrwC/8/</a></p>