Displaying text labels correctly
<p>I'm trying to show a label on each circle of the svg and change them every time the select box changes. Something shows up, but it's unreadable and I don't know what's wrong.</p>

<p>Here's the js bin: <a href="http://jsbin.com/legexovicu/edit?html,output" rel="nofollow">http://jsbin.com/legexovicu/edit?html,output</a></p>

<p>And this is the relevant code:</p>

<pre><code>    var pathContainers = svg.selectAll('g.line')

        .data(operacion);

        pathContainers.enter().append('g')

        .attr('class', 'line')
        .attr("style", function(d) {
            return "stroke: " + color_hash[operacion.indexOf(d)][1]; 
        });

        pathContainers.selectAll('path')
        .data(function (d) { return [d]; }) // continues the data from the pathContainer
        .enter().append('path')
          .attr('d', d3.svg.line()
            .x(function (d) { return xScale(d.x); })
            .y(function (d) { return yScale(d.y); })
          );

        pathContainers.selectAll('text')
            .data(function (d) { return d; })
            .enter().append('text')
            .attr('x', function (d) { return xScale(d.x) + 20; })
            .attr('y', function (d) { return yScale(d.y) + 25; })
            .text( function (d) { return d.name; })
            .attr("text-anchor", "middle")
            .attr("font-family", "arial")
            .attr("font-size", "5px")
            .attr("fill", "white")
            .attr('background','white');

        // add circles

        pathContainers.selectAll('circle')

        .data(function (d) { return d; })
        .enter().append('circle')
        .attr('cx', function (d) { return xScale(d.x); })
        .attr('cy', function (d) { return yScale(d.y); })
        .attr('r', 2)
        .style('fill', 'white')

        .attr("title", function(d) { return d.name });
</code></pre>

<p>If I look the generated html, I see something like this:</p>

<pre><code>&lt;text x="70" y="75" text-anchor="middle" font-family="arial" font-size="5px" fill="white" background="white"&gt;Consti&lt;/text&gt;
</code></pre>

<p>But I end up getting something illegible.</p>