軸上的自定義刻度大小（d3js）

我在d3.js中創建svg x-y圖表。是否有可能根據tickValue創建不同長度的蜱？軸上的自定義刻度大小（d3js）

我已經作出了自己的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);

我得到一個錯誤：無效屬性x2的值=「NaN」每個勾號的錯誤。

來源

2014-02-05 swenedo

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/

如果不工作，谷歌的主要/次要勾號模式的例子。只要確保你正在看的例子使用d3版本3：版本2中增加了一些額外的與刻度相關的方法，這些方法不再被支持。 See this SO Q&A.

來源

2014-02-05 17:17:17 AmeliaBR

'.tickSize（10）' – noobninja

變體的答案符合我的要求。選擇了我只需要刻度線而不是刻度和值的值，添加了「隱藏」類。但是這可以用於主題上的任何變化。

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

來源

2014-12-04 14:48:08 MaxRocket

軸上的自定義刻度大小（d3js）

回答

相關問題