d3 Achsenbeschriftung

Wie füge ich Achsen in d3 Textbeschriftungen hinzu?

Zum Beispiel habe ich ein einfaches Liniendiagramm mit einer x- und einer y-Achse.

Auf meiner x-Achse habe ich Häkchen von 1 bis 10. Ich möchte, dass das Wort "Tage" darunter angezeigt wird, damit die Leute wissen, dass die x-Achse Tage zählt.

In ähnlicher Weise habe ich auf der y-Achse die Zahlen 1-10 als Zecken und möchte, dass die Wörter "Sandwiches gegessen" seitlich erscheinen.

Gibt es eine einfache Möglichkeit, dies zu tun?

Achsenbeschriftungen sind nicht in die Achsenkomponente von D3 integriert , aber Sie können Beschriftungen selbst hinzufügen, indem Sie einfach ein SVG- textElement hinzufügen . Ein gutes Beispiel dafür ist meine Nachbildung von Gapminders animiertem Blasendiagramm The Wealth & Health of Nations . Die Beschriftung der x-Achse sieht folgendermaßen aus:

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

Und die Beschriftung der y-Achse lautet wie folgt:

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

Sie können diese Beschriftungen auch mithilfe eines Stylesheets nach Ihren Wünschen zusammen ( .label) oder einzeln ( .x.label, .y.label) gestalten.

In der neuen D3js-Version (ab Version 3) haben Sie beim Erstellen einer Diagrammachse über die d3.svg.axis()Funktion Zugriff auf zwei Methoden, die aufgerufen werden tickValuesund tickFormatin die Funktion integriert sind, sodass Sie angeben können, für welche Werte Sie die Ticks benötigen und in welchen Format, in dem der Text angezeigt werden soll:

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

Wenn Sie die Beschriftung der y-Achse in der Mitte der y-Achse haben möchten, wie ich es getan habe:

1. Drehen Sie den Text mit der Mitte des Textankers um 90 Grad
2. Übersetzen Sie den Text durch seinen Mittelpunkt
   • x-Position: um eine Überlappung der Häkchenbeschriftungen auf der y-Achse zu verhindern ( -50)
   • y-Position: passend zum Mittelpunkt der y-Achse ( chartHeight / 2)

Codebeispiel:

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

Dies verhindert, dass das gesamte Koordinatensystem gedreht wird, wie oben von lubar erwähnt.

Wenn Sie wie vorgeschlagen in d3.v4 arbeiten, können Sie diese Instanz verwenden und alles bieten, was Sie benötigen.

Möglicherweise möchten Sie nur die Daten der X-Achse durch Ihre "Tage" ersetzen, aber denken Sie daran, die Zeichenfolgenwerte korrekt zu analysieren und keine Verkettung anzuwenden.

parseTime kann genauso gut den Trick für die Skalierung von Tagen mit einem Datumsformat ausführen?

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

Geige mit globalen CSS / JS

D3 bietet einen ziemlich einfachen Satz von Komponenten, mit denen Sie Diagramme zusammenstellen können. Sie erhalten die Bausteine, eine Achsenkomponente, Datenverbindung, Auswahl und SVG. Es ist Ihre Aufgabe, sie zu einem Diagramm zusammenzufügen!

Wenn Sie ein herkömmliches Diagramm wünschen, dh ein Achsenpaar, Achsenbeschriftungen, einen Diagrammtitel und einen Diagrammbereich, schauen Sie sich doch d3fc an . Es handelt sich um einen Open-Source-Satz von D3-Komponenten auf höherer Ebene. Es enthält eine kartesische Diagrammkomponente, die möglicherweise Ihren Anforderungen entspricht:

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

Ein vollständigeres Beispiel finden Sie hier: https://d3fc.io/examples/simple/index.html

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

oder

xAxis: {
   axisLabel: 'Label here'
},