軸上的自定義刻度尺寸（d3js）

Question

我在d3.js中創建了一個svg xy-chart。 是否可以根據tickValue創建不同長度的刻度？

我已經創建了自己的tickFormat函數myTickFormat並在.tickFormat([format])使用它，並且工作正常，因為[format]應該是一個函數。 但是不可能對.innerTickSize([size])做同樣的.innerTickSize([size]) ，它需要一個數字。

例如，如果我希望值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);

我收到錯誤：每個tick的屬性x2 =“NaN”錯誤的值無效 。

Answer 1

tickSize函數只能接受一個數字作為參數，而不是函數，但還有其他解決方案。

最簡單的方法？ 繪制軸后，選擇所有刻度線並根據其數據值調整它們的大小。 請記住，每次重繪軸后你都必須這樣做。

例：
https://jsfiddle.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)

示例： https ： //jsfiddle.net/zUj3E/2/

如果這不起作用，請谷歌搜索主要/次要刻度模式的示例。 只需確保您正在查看的示例使用d3版本3：在版本2中添加了一些額外的與tick相關的方法，這些方法不再受支持。 看到這個問答。

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