d3.jsにカスタム目盛ラベルを追加するには？

Question

このパターンの1,2,3,4,3,2,1のように、x軸にカスタム目盛ラベルを追加したいとします。しかし、私が使用しているコードは、減少する数字を示していません。

var margin = { 
    top: 100, 
    right: 100, 
    bottom: 100, 
    left: 100 
}, 
width = 960 - margin.left - margin.right, 
height = 500 - margin.top - margin.bottom; 

var x = d3.scale.ordinal() 
    .domain([1, 2, 3, 4, 5, 4, 3, 2, 1]) 
    .rangePoints([0, width]); 

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

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

svg.append("g") 
.attr("class", "x axis") 
.call(xAxis); 

何か助けていただければ幸いです。ありがとう。

Answer 1

この問題を解決するためには少しハックが必要でした。

原因

• d3.scale.ordinal（）、純粋に数学的な論理のドメイン計算。範囲に関連付けられた各ドメイン （f（x）= y）。
• 複製は、それが曖昧になりますので、許可されていない

ソリューション

• ドメインとして軸に総項目にリニアスケールを作成し、[0、itemLength]
• 軸使用tickFormatを作成中要素のインデックスを見つけるために

var margin = { 
 
\t top: 100, 
 
\t right: 100, 
 
\t bottom: 100, 
 
\t left: 100 
 
}, 
 
width = 560 - margin.left - margin.right, 
 
height = 500 - margin.top - margin.bottom; 
 

 
var xdata = ["1", "2", "3", "4", "5", "4", "3", "2", "1", "0"]; 
 

 
var linear = d3.scale.linear() 
 
\t .domain([0, 10]) 
 
\t .range([0, width]); 
 

 
var xAxis = d3.svg.axis() 
 
\t .scale(linear) 
 
\t .orient("bottom"); 
 

 
var axis = d3.svg.axis() 
 
\t .scale(linear) 
 
\t .orient("top") 
 
\t .ticks(10) 
 
\t .tickFormat(function (d) { 
 
\t \t return xdata[d]; 
 
\t }); 
 

 
var svg = d3.select("body").append("svg") 
 
\t .attr("width", width + margin.left + margin.right) 
 
\t .attr("height", height + margin.top + margin.bottom) 
 
\t .append("g") 
 
\t .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
svg.append("g") 
 
.attr("class", "x axis") 
 
.call(axis);

.axis path, line { 
 
    fill: none; 
 
    stroke: #000; 
 
    stroke-linecap: round; 
 
}

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