d3js에서 x 축을 따라 스크롤 가능한 축/팬을 만드는 방법

Question

X 축을 따라 데이터를 스크롤하는 옵션이있는 angularjs의 D3.js를 사용하여 타임 라인 차트를 만들려고합니다.

var rawSvg = element.find("svg")[0]; 

var width = 1000, height = 300; 
var svg = d3.select(rawSvg) 
        .attr("width", width) 
        .attr("height", height); 


// scale for x and y axis 
var xScale = d3.time.scale().domain([new Date(), d3.time.day.offset(new Date(), 5)]).range([0, width]); 
var yScale = d3.scale.linear().domain([28, 0]).range([0, height-75]); 

var zoom = d3.behavior.zoom().x(xScale).y(yScale).scaleExtent([1,1]).on("zoom", zoomed); 

// setting up axis 
var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(d3.time.hour, 3).innerTickSize(-(height-75)).outerTickSize(2); 

var yAxis = d3.svg.axis().scale(yScale).orient("left").outerTickSize(2).ticks(0).tickFormat(function(d){ 
      return ''; 
     }).tickPadding(10); 

var g = svg.append("g").attr("transform","translate(20,10)").call(zoom); 

// axis 
g.append("g") 
      .attr("class", "x-axis") 
      .attr("transform","translate(0,"+(height-75)+")") 
      .call(xAxis) 
      .selectAll("text") 
      .style("text-anchor", "center"); 

g.append("g") 
      .attr("class", "y-axis") 
      .call(yAxis); 


function zoomed(){ 
      svg.select('.x.axis').call(xAxis) 
      // svg.select('.y.axis').call(yAxis) 
} 

하지만 그렇게 할 수 없습니다. 나는 이런 식의 차트를 얻고있다.

는하지만 내가 원하는 것은 현재 날짜 데이터를 표시하고 사용자가 과거와 미래의 데이터를 볼 수 x 축을 따라 스크롤 할 수있을 것입니다.

this과 같은 것을 달성하려고합니다. 나는 전체 길이 사각형 지금은 줌 이벤트를 캡처 할 수 있습니다 추가 한 있도록

위의 코드에서 편집

나는 줌 이벤트를 캡처 할 수 없습니다.

g.append("rect") 
      .attr("width", width) 
      .attr("height", height-75) 
      .style("fill", "none") 
      .style("pointer-events", "all"); 

하지만 여전히 x 축을 따라 스크롤 할 수 없습니다.

Answer 1

때때로 문제를 디버깅하는 데 많은 시간이 걸릴 수 있지만 해결책은 보조 맞춤법 오류/선택 실수 일 것입니다. 나는 이것에 대해 약 40 분을 보냈지 만 그것은 단지 작은 선택 실수 일뿐입니다.

이러한 경우 중 하나입니다. 그래서 여기에 '문제 :

당신은 class 이름 x-axis가 X 축에 있지만 zoom 함수합니다 (대시 여기 통지)를 적용, 당신은 옳지 않다 .x.axis와 축 찾고 있습니다.

JS FIDDLE

코드 변경 : 그래서 여기에 문제를 해결하여 바이올린의 포크입니다 또한

function zoomed(){ 
    svg.select('.x-axis').call(xAxis) 
} 

가, 나는에 매 6 시간으로 X 축에 ticks의 수를 변경했습니다 중복을 피하십시오.

희망이 도움이됩니다. :)