DC.js 막 대형 차트 x 축 레이블이 막대와 정렬되지 않음

Question

DC.js를 사용하여 순서 x 축을 갖는 누적 막 대형 차트를 만듭니다. 사용

버전 : dc.js를 버전 1.7.5 이 문제는 차트의 x 축 라벨이 막대와 정렬되지 않은 것을 버전 1.3.12 D3.js 버전 3.5.17

crossfilter.js . 실제로 두 개의 틱을 오른쪽으로 이동 시키므로 마지막 두 개의 레이블에는 막대가 없습니다.

수정 도구 - 데이터를 필터링하는 데 가장 오른쪽 막대를 선택할 수 없습니다. 예를 들어 마우스를 위로 가져 가면 크로스 필터를 클릭하고 활성화 할 수있는 선택기가 표시되지 않습니다. - 차단 커서가 겹치는 두 개의 차트 여백 만있었습니다.

다음은 문제를 나타내는 차트의 스크린 샷입니다.

x 축은

.xUnits(dc.units.ordinal)는 I들이 수직이되도록 X 축 라벨 방향을 변경하기 renderlet 사용하여 ordinal 세트이다. renderlet을 제거해도 위의 문제는 변경되지 않습니다.

여기 내 차트 div 및 자바 스크립트 코드입니다.

<div id="month-chart"></div> 

<script type="text/javascript"> 
    d3.csv("merged_hostname.csv", function(data) { 

     var parseDate = d3.time.format("%Y-%m-%d").parse; 

     data.forEach(function(d) { 
      d.date = parseDate(d.date); 
      d.sessions = +d.sessions; 
      d.ad_requests = +d.ad_requests; 
      d.bounceRate = +d.bounceRate; 
      d.clicks = +d.clicks; 
      d.earnings = +d.earnings; 
      d.newUsers = +d.newUsers; 
      d.sessionDuration = +d.sessionDuration; 
      d.sessionsPerUser = +d.sessionsPerUser; 
      d.twitterSessions = +d.twitterSessions; 
      d.users = +d.users; 
     }); 

     var ndx = crossfilter(data); 

     var yyyymmDim = ndx.dimension(function(d) { return d["yyyymm"]; }); 

     var PPCCByYYYYMM = yyyymmDim.group().reduceSum(function(d) { 
      if (d.PPCC === "PPCC") { 
       return +d.sessions; 
      }else{ 
       return 0; 
      } 
      }); 

     var otherByYYYYMM = yyyymmDim.group().reduceSum(function(d) { 
      if (d.PPCC === "Other") { 
       return +d.sessions; 
      }else{ 
       return 0; 
      } 
      }); 

     monthChart = dc.barChart("#month-chart"); 

     monthChart 
      .height(200) 
      .width(500) 
      .margins({top: 10, right: 10, bottom: 50, left: 40}) 
      .dimension(yyyymmDim) 
      .group(PPCCByYYYYMM) 
      .stack(otherByYYYYMM) 
      .transitionDuration(500) 
      .brushOn(true) 
      .elasticY(true) 
      .yAxisLabel('sessions') 
      .x(d3.scale.ordinal()) 
      .xUnits(dc.units.ordinal) 
      .renderlet(function (chart) { 
       chart.selectAll("g.x text") 
       .attr('dx', '-30') 
       .attr('transform', "rotate(-90)"); 
      }); 

     dc.renderAll(); 

    }); 
</script> 

어떤 아이디어로 이러한 문제가 발생하고 해결할 수 있습니까?

Answer 1

이 함께 왼쪽 위치를 이동할 수 있습니다

.attr를 ("회전 (-90)) (-20,0 번역 ','변환 ');

필요하다면 20을 변경하십시오.