Пользовательский размер галочки по оси (d3js)

Question

Я создаю xv-диаграмму svg в d3.js. Можно ли создавать тики разной длины в зависимости от tickValue?

Я сделал свою собственную функцию tickFormat myTickFormat и использовать его в .tickFormat([format]) и что работает хорошо, потому что [формат], как ожидается, будет функцией. Но нельзя сделать то же самое с .innerTickSize([size]), который ожидает число.

E.g. если я хочу клеща на значение 70, чтобы быть больше, я хочу сделать что-то вроде этого:

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

Но когда я использую myTickSize в качестве аргумента .innerTickSize():

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

Я получаю Error: Invalid значение для атрибута x2 = "NaN" ошибка для каждого тика.

Answer 1

Функция tickSize может принимать только число как аргумент, а не функцию, но есть и другие решения.

Самый простой подход? После рисования оси выберите все линии тика и измените их размер в соответствии с их значением данных. Просто помните, что вам придется делать это после каждой перерисовки оси.

Пример:
http://fiddle.jshell.net/zUj3E/1/

Код ключа:

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; 
    }); 

Обратите внимание, что клещ знаки на максимальным и минимальным значениями также обращается как часть одного и того же <path> как осевой линии, таким образом сокращая они не имеют большого эффекта. Если вам не нравится эта нехватка контроля, объявляйте, что «внешние» тики имеют нулевую длину при настройке оси. Это выключит углы пути, но внешние тиков все еще есть строки, которые вы можете контролировать то же самое, как и другие клеща линии:

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

Пример: http://fiddle.jshell.net/zUj3E/2/

Если это не работает, Google для примеров основных/незначительных шаблонов тика. Просто убедитесь, что пример, который вы смотрите, использует d3 version 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; 
         });