텍스트 레이블 올바르게 표시

Question

svg의 각 원에 레이블을 표시하고 선택 상자가 변경 될 때마다 변경하려고합니다. 뭔가 나타나지만 읽을 수 없으며 무엇이 잘못되었는지 알지 못합니다. 여기

은 JS 빈입니다 : http://jsbin.com/legexovicu/edit?html,output

그리고 이것은 관련 코드 :

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

그러나 I : 내가 생성 된 HTML을 보면

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 }); 

, 나는 이런 식으로 뭔가를 참조 결국 뭔가를 읽을 수 없게된다.

Answer 1

당신의 텍스트에이 추가 :

여기

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

은 JSBin입니다 : http://jsbin.com/lujuhupata/1/edit?html,output