축에 사용자 정의 틱 크기 (d3js)

Question

d3.js에서 svg x-y-chart를 생성합니다. tickValue에 따라 다른 길이의 틱을 만들 수 있습니까?

나는 내 자신의 tickFormat 기능 myTickFormat을 만들어 .tickFormat([format])에 그것을 사용하고 가 [포맷]이 함수가 될 것으로 예상되기 때문에 그 잘 작동했다. 그러나 번호가 필요한 .innerTickSize([size])으로는이 작업을 수행 할 수 없습니다.

예. 내가 더 이상 할 값 (70)의 눈금을 원하는 경우 I는 다음과 같이 수행 할 :

var myTickSize = function(d) { 
    if (d === 70) { return 20;} 
    return 6; 
}; 

을하지만 .innerTickSize()에 인수로 myTickSize를 사용하는 경우 :

var yScale = d3.scale.linear(); 
var yAxis = d3.svg.axis() 
       .scale(yScale).orient("left") 
       .innerTickSize(myTickSize); 

을 나는 오류 : 잘못된를 속성 x2에 대한 값 = "NaN" 각 틱마다 오류가 발생했습니다.

Answer 1

tickSize 함수는 함수가 아닌 인수로만 수를 허용 할 수 있지만 다른 솔루션이 있습니다.

가장 쉬운 방법은? 축을 그린 후에는 모든 눈금 선을 선택하고 데이터 값에 따라 크기를 조정하십시오. 모든 축이 다시 그려지면이 작업을 수행해야한다는 것을 기억하십시오.

예 :
http://fiddle.jshell.net/zUj3E/1/

키 코드 : 최대 및 최소 값의 눈금 역시 매우 단축 축선과 동일한 <path>의 일부로서 그려진 것이

d3.selectAll("g.y.axis g.tick line") 
    .attr("x2", function(d){ 
    //d for the tick line is the value 
    //of that tick 
    //(a number between 0 and 1, in this case) 
     if ((10*d)%2) //if it's an even multiple of 10% 
      return 10; 
     else 
      return 4; 
    }); 

참고 그들에는 많은 효과가 없다. 그러한 제어력이 맘에 들지 않는다면 축을 설정할 때 "바깥 쪽"틱의 길이가 0이되도록 선언하십시오. 즉, 경로의 모서리를 해제하지만, 외부 진드기는 여전히 다른 틱 라인과 동일하게 제어 할 수 있습니다 라인이있을 것이다 :

var axis = d3.svg.axis() 
    .tickSize(10,0) 

예 : http://fiddle.jshell.net/zUj3E/2/

문제가 해결되지 않으면, 주요/작은 눈금 패턴의 예를 보려면 google을 방문하십시오. 지금보고있는 예제가 d3 버전 3을 사용하고 있는지 확인하십시오. 더 이상 지원되지 않는 몇 가지 추가 틱 관련 메소드가 버전 2에 추가되었습니다. See this SO Q&A.

Answer 2

내 요구 사항에 적합한 답변입니다. 진드기와 값 대신 눈금 표시를 원했던 값을 선택하고 "숨김"클래스를 추가했습니다. 그러나 이것은 테마의 변형에 사용할 수 있습니다.

  var gy = humiditySVG.append("g") 
       .attr("class", "y axis") 
       .attr("transform", "translate(" + 154 + "," + 0 + ")") 
       .call(yAxis); 

      humiditySVG.selectAll("text") 
       .attr("class", function (d) { 
              if ($.inArray(d, [0,50,100])==-1 ) { 
           return "hide"; 
          } 
          return; 
         }); 
      humiditySVG.selectAll("line") 
       .attr("x2", function (d) { 
          if ($.inArray(d, [0,50,100])==-1 ) { 
           return 1; 
          } else { 
           return 3; 
          } 
          return; 
         });