xAxis와 텍스트 사이의 d3 상호 작용

Question

나는 텍스트 'g' axis element and a series of'의 상호 작용으로 인해 문제가 있습니다. 나는 사각형이 대응하는 날짜 x 좌표를 따라 위치하지만 y와 동일한 날짜 x 축으로 만 그래프를 만들려고합니다. text 요소가 화면에 렌더링되지 않습니다 몇 가지 이유를 들어

var dataset = [ 

      {'startYear' : '2004-01-12', 
      'label' : 'green'}, 
      {'startYear' : '2005-06-07', 
      'label' : 'red'}, 
      {'startYear' : '2010-03-04', 
      'label' : 'red'}, 
      {'startYear' : '2010-07-28', 
      'label' : 'yellow'} 

      ]; 

      var w = 750; 
      var h = 500; 
      var padding = 30; 


      var svg = d3.select(element[0]) 
         .append('svg') 
         .attr('width',w) 
         .attr('height',h); 

      var xScale = d3.time.scale() 
         .domain([new Date('2004-01-01'),new Date('2014-12-31')]) 
         .range([padding,w-padding*2]); 

      var xAxis = d3.svg.axis() 
         .scale(xScale) 
         .orient('bottom') 
         .ticks(d3.time.years) 
         .tickFormat(d3.time.format('%Y')); 


      var axisStyle = {'fill': 'none', 'stroke': 'black','shape-rendering': 'crispEdges','font-family':'sans-serif','font-size': '11px'}; 

      svg.append('g') 
       .style(axisStyle) 
       .attr('transform', 'translate(0,' + (h - padding) + ')') 
       .attr('text-anchor', 'end') 
       .call(xAxis); 

      svg.selectAll('rect') 
      .data(dataset) 
      .enter() 
      .append('rect') 
      .attr('x',function(d){return xScale(new Date(d.startYear));}) 
      .attr('y',h-padding*2.5) 
      .attr('height',20) 
      .attr('width',20) 
      .attr('fill',function(d){return d.label;}); 

      svg.selectAll('text') 
      .data(dataset) 
      .enter() 
      .append('text') 
      .attr('x',0) 
      .attr('y',30) 
      .text('monkeys'); 

:

내가 일하고 코드는 다음과 같다. 문제의 원인을 조사 할 때 x 축의 요소를 주석으로 처리하는 것이 해결책이라고 알았지 만 분명히 xaxis를 유지해야합니다. 왜 이런 일이 일어나는 걸까요? 그리고 그 주위에 해결책이 있습니까?

Answer 1

문제는 먼저 축을 추가한다는 것입니다. 즉, 레이블을 추가하는 코드를 실행하면 DOM에 이미 text 개의 요소가 있습니다. 따라서 svg.selectAll('text')이 선택합니다. 그런 다음 D3은 전달한 데이터를 .data()에 일치시키고 각 데이터 항목과 일치하는 항목을 찾습니다. 따라서 .enter() 선택 사항은 비어 있습니다.

svg.selectAll('text.label') 
     .data(dataset) 
     .enter() 
     .append('text') 
     .attr("class", "label") 
     .attr('x',0) 
     .attr('y',30) 
     .text('monkeys'); 

: 해결하기 위해

, 당신은 다른 text 요소와 구별 할 수 있도록이 라벨에 특별한 클래스를 지정