Textbeschriftungen korrekt anzeigen

Question

Ich versuche, eine Beschriftung auf jedem Kreis der SVG anzuzeigen und sie jedes Mal zu ändern, wenn sich die Auswahlbox ändert. Etwas taucht auf, aber es ist unlesbar und ich weiß nicht, was los ist.

Hier ist der js bin: http://jsbin.com/legexovicu/edit?html,output

Und das ist der entsprechende 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 }); 

Wenn ich die generierten HTML aussehen, ich so etwas wie dies sehen:

<text x="70" y="75" text-anchor="middle" font-family="arial" font-size="5px" fill="white" background="white">Consti</text> 

Aber ich Am Ende wird etwas unleserlich.

Answer 1

Fügen Sie diese auf Ihre Texte:

.style("stroke-width", 1); 

Hier ist Ihre JSBin: http://jsbin.com/lujuhupata/1/edit?html,output