D3.jsの最後のティック値をどのように変更しますか？

Question

は、私がこのようなものがあるだろう：私は私が試した

80 

> 80 

に最後の値を変更するにはどうすればよい

|------|------|------|------|------|------|------|------| 
0  10  20  30  40  50  60  70  80 

を

.tickValues(); 

エドあなたはダニのテキストを変更する.tickFormatを使用する必要が

.domain() 

など

Answer 1

をiting。これを行う最も簡単な方法は、以下に示すように特定のティックのデータが80であるかどうかを確認し、そのティックを変更することです。

ただし、d3はティックを最適化しようとしますが、d3が80でティックを望んでいないと判断した場合、このチェックは機能しません。この場合、.tickValuesを使用すると、 。

var width = 300; 
 
var height = 200; 
 

 
var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width",width+40) 
 
    .attr("height",height) 
 
    .attr("transform","translate(20,20)"); 
 

 
var x = d3.scaleLinear() 
 
    .domain([0,80]) 
 
    .range([0,width]); 
 
    
 
var xAxis = d3.axisBottom(x) 
 
    .tickValues([0,20,30,40,50,60,70,80]) 
 
    .tickFormat(function(d) { return (d == 80) ? "> 80" : d; }) 
 
    
 
svg.call(xAxis); 
 
    
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

Answer 2

ティックは、第2および第3の引数を使用して最後のものである場合、これは確認行うことができる。

var axis = d3.axisBottom(scale) 
    .tickFormat(function(d, i, n) { 
     return n[i + 1] ? d : ">" + d; 
    }) 

ない要素が最後のインデックスがn[i + 1]でありますされていないので返信false。

次に、3値は、その値に関係なく、最後のティックのみに変更を適用することを保証します。ほぼ同時に

var svg = d3.select("svg"); 
 
var scale = d3.scaleLinear() 
 
    .range([20, 480]) 
 
    .domain([0, 80]); 
 

 
var axis = d3.axisBottom(scale) 
 
    .tickFormat(function(d, i, n) { 
 
    return n[i + 1] ? d : ">" + d; 
 
    }) 
 

 
var gX = svg.append("g") 
 
    .attr("transform", "translate(0,50)") 
 
    .call(axis)

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg width="500" height="100"></svg>