d3.js에 맞춤 진드기 라벨을 추가하는 방법은 무엇입니까?

이 패턴의 1,2,3,4,3,2,1처럼 x 축에 맞춤 눈금 레이블을 추가하고 싶습니다. 그러나 내가 사용하고있는 코드는 감소하는 숫자를 보여주지 않습니다.d3.js에 맞춤 진드기 라벨을 추가하는 방법은 무엇입니까?

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

모든 종류의 도움을 받으실 수 있습니다. 감사.

출처

2017-12-21 Steve Doson

이 당신을 위해 일하는 희망 -> https://stackoverflow.com/questions/44872048/d3-js-how-can-i-create-an-axis-with-custom-labels-and- 세관 검사 –

작은 해킹이 문제를 해결해야했습니다.

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>

출처

2017-12-21 08:40:55

d3.js에 맞춤 진드기 라벨을 추가하는 방법은 무엇입니까?

답변

관련 문제