D3.js : yAxis 텍스트가 굵게 표시되고 흐리게 표시됩니다.

Question

D3.js를 사용하여 사용자 지정된 yAxis를 플롯하려고합니다. 내 이상적인 결과는 JSFiddle과 같아야합니다.

그러나 CSS 스타일과 함께 SVG 이미지를 내보내는 방법을 찾지 못했습니다. 그래서 SVG 요소에 스타일을 이동하고 싶습니다 :

var yNode = svg.append("g") 
       .style("fill", "none") 
       .style("stroke", "#000") 
       .attr("transform", "translate(" + left + ",0)") 
       .attr("class", "axis") 
       .call(yAxis); 
yNode.selectAll('text') 
       .style('font-size', '11px') 
       .style('font-family', 'Lucida Console'); 

코드는 여기에 있습니다 : JSFiddle.

모든 스타일이 동일합니다. 하지만 어쨌든 yAxis 레이블은 흐릿하고 굵게 표시됩니다. 그것을 고치는 방법? 감사.

Answer 1

는 여기있다 :

JsFiddle 당신은 전체 축 DOM 요소를 선택하고 채우기를 적용 : 없음과 뇌졸중 : 그것에 검은 색. 축에는 경로와 텍스트가 모두 포함되며 두 요소 모두 획에 의해 영향을받습니다. 그것이 당신의 텍스트가 쓰여진 이유입니다.

그래서 내가 여기

var yNode = svg.append("g") 
     //.style("fill", "none") 
     //.style("stroke", "#000")    
     .attr("transform", "translate(" + left + ",0)") 
     //.attr("class", "axis") 
     .call(yAxis); 

채우기 & 스트로크에서 주석의 경로를 선택하여 추가 채우기 및 스트로크 스타일

yNode.select('path') 
     .style("fill", "none") 
     .style("stroke", "#000");