d3.js - 爲Y軸添加一個附加刻度不起作用

Question

我使用以下繪製了一個d3圖形。

我想Y軸有一個額外的勾號。這意味着，域範圍達到了我的數據集中的最大y值。並且我想要一個額外的圖表，這個圖表不會被圖表所觸及。

爲了達到這個目的，我宣佈了一個變量，其中存儲了滴答計數，然後在Y軸的滴答（）中增加了一個。 這不起作用，相反，y軸現在變得模糊。

這裏是代碼的相關部分：

yScale = d3.scale.linear().range([height - margin.top, 
     margin.bottom 
    ]).domain([0, max_y]), 


    yAxis = d3.svg.axis() 
    .scale(yScale) 
    .orient("left") 
    .innerTickSize(-width + margin.left) 
    .outerTickSize(0) 
    .tickPadding(10); 

var ticksCount = yAxis.ticks(); 
yAxis.ticks(ticksCount + 1); 

vis.append("svg:g") 
    .attr("class", "y axis") 
    .style({ 
     'stroke': 'Black', 
     'fill': 'none', 
     'stroke-width ': 1, 
     "font-size": "13px" 
    }) 
    .attr("transform", "translate(" + (margin.left) + ",0)") 
    .call(yAxis); 

Answer 1

axis.ticks()作爲吸氣劑返回陣列，而不是一個號碼。

因此，該...

​​

...返回蜱的數目（這是10）作爲陣列（[10]）。然後，當你嘗試1到這個陣列，看看會發生什麼：

console.log([10] + 1)

你有101只蜱結束了（注：101這裏實際上是一個字符串，而不是數字）。這就是爲什麼你說「y軸現在變得模糊」。它沒有模糊，你只是有一個大量的蜱。

你可能會認爲你應該做的：

var ticksCount = yAxis.ticks()[0]; 
//get the element -------------^ 
yAxis.ticks(ticksCount + 1); 

但是，這將使沒有區別：您將在軸更蜱，但在軸的最小/最大將是相同的。

解決方案：改變不是域：

yScale = d3.scale.linear() 
    .range([height - margin.top, 
     margin.bottom 
    ]).domain([0, max_y * 1.05]) 
    //add 5% to the top ----^