d3 축 라벨링

Question 1

d3의 축에 텍스트 레이블을 어떻게 추가합니까?

예를 들어 x 축과 y 축이있는 간단한 선 그래프가 있습니다.

x 축에는 1부터 10까지의 눈금이 있습니다. 사람들이 x 축이 일을 계산한다는 것을 알 수 있도록 그 아래에 "일"이라는 단어를 표시하고 싶습니다.

마찬가지로, y 축에는 1-10의 숫자가 틱으로 표시되고 "샌드위치 먹음"이라는 단어가 옆으로 나타나기를 원합니다.

이를 수행하는 간단한 방법이 있습니까?

Question 2

축 레이블은 D3의 축 구성 요소 에 내장되어 있지 않지만 SVG text요소 를 추가하여 직접 레이블을 추가 할 수 있습니다 . 이에 대한 좋은 예는 Gapminder의 애니메이션 버블 차트 인 The Wealth & Health of Nations를 재현 한 것입니다 . x 축 레이블은 다음과 같습니다.

svg.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width)
    .attr("y", height - 6)
    .text("income per capita, inflation-adjusted (dollars)");

그리고 다음과 같은 y 축 레이블 :

svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("y", 6)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-90)")
    .text("life expectancy (years)");

스타일 시트를 사용하여 원하는대로 함께 ( .label) 또는 개별적으로 ( .x.label, .y.label) 레이블의 스타일을 지정할 수 있습니다 .

Question 3

당신은을 통해 그래프의 축을 만들 때 새 D3js 버전 (이후 버전 3)에서, d3.svg.axis()함수는 두 가지 방법에 대한 액세스가 호출 한 tickValues및 tickFormat내장 된 함수 내부 그래서 당신은 값을 지정 당신과의 진드기를 필요로 할 수있는 것 텍스트를 표시 할 형식 :

var formatAxis = d3.format("  0");
var axis = d3.svg.axis()
        .scale(xScale)
        .tickFormat(formatAxis)
        .ticks(3)
        .tickValues([100, 200, 300]) //specify an array here for values
        .orient("bottom");

Question 4

내가했던 것처럼 y 축 중앙에 y 축 레이블을 원하는 경우 :

텍스트 앵커 중간을 사용하여 텍스트를 90도 회전
중간 점으로 텍스트 번역
- x 위치 : y 축 눈금 레이블의 겹침 방지 ( -50)
- y 위치 : y 축의 중간 점 일치 ( chartHeight / 2)

코드 샘플 :

var axisLabelX = -50;
var axisLabelY = chartHeight / 2;

chartArea
    .append('g')
    .attr('transform', 'translate(' + axisLabelX + ', ' + axisLabelY + ')')
    .append('text')
    .attr('text-anchor', 'middle')
    .attr('transform', 'rotate(-90)')
    .text('Y Axis Label')
    ;

이것은 위의 lubar에서 언급 한 것처럼 전체 좌표계가 회전하는 것을 방지합니다.

Question 5

제안 된대로 d3.v4에서 작업하는 경우 필요한 모든 것을 제공하는이 인스턴스를 사용할 수 있습니다.

X 축 데이터를 "일"로 바꾸고 싶을 수도 있지만 문자열 값을 올바르게 구문 분석하고 연결을 적용하지 마십시오.

parseTime은 날짜 형식으로 확장하는 날에 대한 트릭을 수행 할 수 있습니까?

d3.json("data.json", function(error, data) {
if (error) throw error;

data.forEach(function(d) {
  d.year = parseTime(d.year);
  d.value = +d.value;
});

x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([d3.min(data, function(d) { return d.value; }) / 1.005, d3.max(data, function(d) { return d.value; }) * 1.005]);

g.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));


g.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y).ticks(6).tickFormat(function(d) { return parseInt(d / 1000) + "k"; }))
  .append("text")
    .attr("class", "axis-title")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .attr("fill", "#5D6971")
    .text("Population)");

글로벌 CSS / JS로 바이올린

Question 6

D3는 차트를 조합하는 데 사용할 수있는 매우 낮은 수준의 구성 요소 집합을 제공합니다. 빌딩 블록, 축 구성 요소, 데이터 결합, 선택 및 SVG가 제공됩니다. 그것들을 모아서 차트를 만드는 것이 당신의 임무입니다!

기존 차트, 즉 한 쌍의 축, 축 레이블, 차트 제목 및 플롯 영역을 원한다면 d3fc를 살펴 보십시오 . 더 높은 수준의 D3 구성 요소로 구성된 오픈 소스 세트입니다. 여기에는 필요할 수있는 데카르트 차트 구성 요소가 포함됩니다.

var chart = fc.chartSvgCartesian(
    d3.scaleLinear(),
    d3.scaleLinear()
  )
  .xLabel('Value')
  .yLabel('Sine / Cosine')
  .chartLabel('Sine and Cosine')
  .yDomain(yExtent(data))
  .xDomain(xExtent(data))
  .plotArea(multi);

// render
d3.select('#sine')
  .datum(data)
  .call(chart);

https://d3fc.io/examples/simple/index.html 에서 더 완전한 예를 볼 수 있습니다.

Question 7

chart.xAxis.axisLabel('Label here');

또는

xAxis: {
   axisLabel: 'Label here'
},