D3js：如果某一軸的數據為0，如何生成X軸標簽/刻度？

Question

就我而言，我有加載到d3Js圖形中的動態數據。 如果我有像這樣的用戶數據，一切都會正常運行：

Name : bla, y: 1, x:1
Name : bla2, y: 1, x:2
Name : bla3, y: 3, x:3
Name : bla4, y: 7, x:4

但是問題出在我有這樣的數據時：

Name : bla, y: 0, x:1
Name : bla2, y: 0, x:2
Name : bla3, y: 0, x:3
Name : bla4, y: 0, x:4

那么整個y軸根本沒有標簽。 在這種情況下，如何顯示預定義標簽？

這是生成軸的代碼：

                var x = d3.scale.linear().range([0, width]);

            var y = d3.scale.linear().range([height, 0]);

            var xAxis = d3.svg.axis().scale(x).orient("bottom");

            var yAxis = d3.svg.axis().scale(y).orient("left");

                   y.domain(d3.extent(data, function(d) { return d.y; })).nice();
         x.domain([0, d3.max(data, function(d) { return d.x; })]).nice();

Answer 1

問題的根源不是所有值均為零，而是所有值都相同且域的寬度為零（最大和最小域值相同）。

在這種情況下，線性標度會崩潰，因為您要創建一個線性關系，以使范圍的開始和結束值都等於域中的相同值。 您不會得到零除錯誤，就像您的范圍是零寬度時一樣，但是沒有有意義的比例或有意義的刻度值。

甚至.nice()函數也無濟於事，因為它被設計為在根據您的域確定適當的刻度間隔后將域擴展到下一個刻度值。

根據您的代碼工作，演示了該問題：
http://fiddle.jshell.net/LJdZZ/

您如何解決？ 您必須強制域的起點和終點不同。 您可以使用幾種不同的方法，必須確定哪種方法適合您的數據：

• 如果您知道您的域通常是小整數，則可以從最大值和最小值中減去1：

   y.domain(d3.extent(data, function (d) { return dy; }).map(function(d, i) { //map the two-element array returned by d3.extent if (i) return d+1; //if i=1 return d-1; //if i=0 }); ) .nice(); 

• 如果通常希望該域包含零，則可以強制其同時包含零和一：

   y.domain(d3.extent(data.concat([{y:0},{y:1}]), function (d) { return dy; })) .nice(); 

• 如果您的數據值和小數位數可能會發生變化，以至於您不想正常強制使用任何值，則可以檢查域寬度是否為零，然后僅設置一個特定域：

   y.domain(d3.extent(data, function (d) { return dy; })) .nice(); var yDomain = y.domain(); if (yDomain[0] == yDomain[1] ) { y.domain([yDomain[0], yDomain[0] + 1]) .nice(); } 

改編小提琴與最后實現的方法：
http://fiddle.jshell.net/LJdZZ/1/

（您可能希望將域檢查和更正作為一個單獨的函數，將比例尺作為參數來調用。這樣，您就可以將其用於兩個線性比例尺，而不會使主代碼變得多余。）