軸とsvgのテキスト要素が互いに隠れる

Question

青い四角形をホバリングすると表示されるツールチップに棒グラフが表示されます。バーの右側に

var yScale = d3.scaleOrdinal() 
     .domain(constNames) 
     .range([barHeight/2, constResults.length * barHeight + barPadding - barHeight/2]); 
     var yAxis = d3.axisLeft(yScale) 
     .tickSize(nameLength) 
     .tickPadding(0); 
     svg2.append("g") 
     .attr("class", "axis") 
     .attr("transform", "translate(" + nameLength + ",0)") 
     .style("text-anchor", "start") 
     .call(yAxis); 

私は値を持つテキスト要素があります：バーの左側の軸のテキスト要素があります

svg2.selectAll("text") 
     .data(constResults) 
     .enter() 
     .append("text") 
     .text(function(d) { 
      return(d + "%"); 
     }) 
     .attr("text-anchor", "start") 
     .attr("alignment-baseline", "central") 
     .attr("y", function(d, i) { 
      return i*(barHeight + barPadding) + barHeight/2; 
     }) 
     .attr("x", function(d) { 
      return xScale(d) + nameLength + barPadding/2; 
     }) 
     .attr("font-family", "sans-serif") 
       .attr("font-size", "12px") 
       .attr("fill", "black"); 

をし、問題がある軸のテキストが入っているときにギア、svgのテキストが隠れている。私は、軸のテキストをオフにすると、SVGのテキストが正常に動作

私のバイオリンです：あなたがこれを行うとhttp://jsfiddle.net/anton9ov/jhf63wpy/

Answer 1

する：あなたはすべてのテキスト要素を選択し、されている

svg2.selectAll("text") 
    .data(constResults) 
    .enter() 
    .append("text"); 

すでにテキストを持っていますそのSVG内の要素。 http://jsfiddle.net/h5xnwwpd/

：これはあなたのフィドルある

svg2.selectAll(".secondText") 
    .data(constResults) 
    .enter() 
    .append("text"); 

：あなたはこのような何かを、選択する必要があります