d3 축 라벨링

d3 축 라벨링

---

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

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

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

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

이 작업을 수행하는 간단한 방법이 있습니까?

---

축 레이블은 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) 레이블의 스타일을 지정할 수 있습니다 .

---

당신은을 통해 그래프의 축을 만들 때 새 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");

---

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

1. 텍스트 앵커 중간을 사용하여 텍스트를 90도 회전
2. 중간 점으로 텍스트 번역
   • 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')
    ;

This prevents rotating the whole coordinate system as mentioned by lubar above.

---

D3 provides a pretty low-level set of components that you can use to assemble charts. You are given the building blocks, an axis component, data join, selection and SVG. It's your job to put them together to form a chart!

If you want a conventional chart, i.e. a pair of axes, axis labels, a chart title and a plot area, why not have a look at d3fc? it is an open source set of more high-level D3 components. It includes a cartesian chart component that might be what you need:

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

You can see a more complete example here: https://d3fc.io/examples/simple/index.html

---

If you work in d3.v4, as suggested, you can use this instance offering everything you need.

You might just want to replace the X-axis data by your "days" but remember to parse string values correctly and not apply concatenate.

parseTime might as well do the trick for days scaling with a date format ?

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

fiddle with global css / js

---

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

or

xAxis: {
   axisLabel: 'Label here'
},

참고URL : https://stackoverflow.com/questions/11189284/d3-axis-labeling