x 축에서 틱의 X 값을 얻는 방법은 무엇입니까?
Richard77
안녕하세요 이해하려고 노력 중이 야 이 예제 와 이 다른 예를 누적 영역에 눈금 선을 추가 할 수 있습니다.
tiksArray = [1900, 1950, 2000, 2010];
keys = ["Amanda", "Ashley", "Betty", "Deborah"];
// Add X axis
const dX = d3.extent(nbrOfBabies, d => d.year);
const x = d3.scaleLinear()
.domain(dX)
.range([0, this.width]);
svg.append("g")
.attr("class", "grid")
.attr("transform", `translate(0,${this.height})`)
.call(this.make_x_gridlines(x)
.tickSize(-this.height)
.tickFormat(null)
);
// gridlines in x axis function
make_x_gridlines(x) {
const bttm = d3.axisBottom(x)
.tickValues(this.tiksArray);
return bttm;
}
이 그래프를 얻고 있습니다. 나는 그 틱의 X 값, 즉 1900 , 1950 , 2000을 알고 싶습니다. 각 열에 대한 범례를 추가 할 수 있도록 각 줄이 시작되는 위치를 알고 싶습니다.
도움을 주셔서 감사합니다.
Gerardo Furtado
D3에서 축 생성기는 틱 위치를 지정하기 위해 전달 된 스케일 을 사용합니다 . 따라서 필요한 tiksArray것은 동일한 척도 (귀하의 경우 x)에 해당 값을 전달하는 것 입니다.
다음은 매우 기본적인 데모입니다.
const ticksArray = [1900, 1950, 2000, 2010];
const svg = d3.select("svg")
const x = d3.scaleLinear()
.domain([1880, 2020])
.range([50, 450]);
svg.append("g")
.attr("transform", `translate(0,${100})`)
.call(d3.axisBottom(x)
.tickValues(ticksArray)
.tickSizeInner(-100)
);
ticksArray.forEach(d => {
console.log("The SVG position of the tick " + d + " is: " + x(d))
})<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="200"></svg>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
Winforms의 차트 컨트롤에서 X 축의 x 값을 자르는 방법은 무엇입니까?
- 2
geom_col ()에서 중복 x 축 값에 대해 별도의 열을 갖는 방법은 무엇입니까?
- 3
qplot ()에서 x 축의 값을 사용자 정의하는 방법은 무엇입니까?
- 4
MATLAB에서 .fig 파일의 일부 x 축 값을 수정하는 방법은 무엇입니까?
- 5
내 플롯의 x 축에서 일부 값을 숨기는 방법은 무엇입니까?
- 6
내 플롯의 x 축에서 일부 값을 숨기는 방법은 무엇입니까?
- 7
JFreeChart에서 X 축의 값을 수평으로 만드는 방법은 무엇입니까?
- 8
matplotlib에서 x 축 값을 정리하는 방법은 무엇입니까?
- 9
x가 R에서 최대 일 때 y의 최소값을 얻는 방법은 무엇입니까?
- 10
Plotly : x 축 값의 형식을 변경하는 방법은 무엇입니까?
- 11
HorizontalBarChart의 최대 x 축 값을 설정하는 방법은 무엇입니까?
- 12
Excel에서 X 축을 범주 축 대신 값 축으로 만드는 방법은 무엇입니까?
- 13
그래프의 너비에 맞게 x 축 레이블을 얻는 방법은 무엇입니까?
- 14
MATLAB에서 x 축의 특정 점에 레이블을 지정하는 방법은 무엇입니까?
- 15
x에 가장 가까운 목록에서 값의 인덱스를 얻는 방법은 무엇입니까?
- 16
y와 z 사이의 값을 얻을 때 X 값을 얻는 방법은 무엇입니까?
- 17
y 축을 x = 0에 놓는 방법은 무엇입니까?
- 18
ggplot2에서 x 축의 눈금 (년 단위)을 이동하는 방법은 무엇입니까?
- 19
불연속 X 축에서 부드러운 밀도 곡선을 얻는 방법은 무엇입니까?
- 20
x 축에서 올바른 순서를 얻는 방법은 무엇입니까?
- 21
그래프와 방정식에서 x로 값의 값을 계산하는 방법은 무엇입니까?
- 22
AngularJS에서 값이 x 인 항목의 행 수를 얻는 방법은 무엇입니까?
- 23
X 축의 R 다중 변수와 Y 축의 값에 플로팅하는 방법은 무엇입니까?
- 24
올바른 X- 틱을 사용하여 Python의 Boxplot에 (x, y) 플롯을 오버레이하는 방법은 무엇입니까?
- 25
개별 축으로 ggplot에서 x 값을 삭제하는 방법은 무엇입니까?
- 26
산점도에서 균일 한 간격으로 x 축 값을 변경하는 방법은 무엇입니까?
- 27
Windows Phone 8.1에서 페이지의 x : Class 속성을 얻는 방법은 무엇입니까?
- 28
Windows Phone 8.1에서 페이지의 x : Class 속성을 얻는 방법은 무엇입니까?
- 29
C #의 4x4 배열에서 가능한 모든 쌍을 얻는 방법은 무엇입니까?
몇 마디 만하겠습니다