it-swarm.com.de

d3 Achsenbeschriftung

Wie füge ich Achsen in d3 Textbeschriftungen hinzu?

Ich habe zum Beispiel 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 bis 10 als Häkchen und möchte, dass die Worte "Sandwiches gegessen" seitwärts erscheinen.

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

90
user1474218

Achsenbeschriftungen sind nicht in D3s Achsenkomponente integriert, aber Sie können Beschriftungen einfach selbst hinzufügen, indem Sie ein SVG text -Element hinzufügen. Ein gutes Beispiel dafür ist meine Neuerstellung 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 sieht folgendermaßen aus:

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 auch ein Stylesheet verwenden, um diese Beschriftungen nach Ihren Wünschen zusammen zu formatieren (.label) oder einzeln (.x.label, .y.label).

157
mbostock

Wenn Sie in der neuen D3js-Version (ab Version 3) eine Diagrammachse mit der Funktion d3.svg.axis() erstellen, haben Sie Zugriff auf zwei Methoden, die tickValues und tickFormat sind. Geben Sie in der Funktion an, für welche Werte Sie die Häkchen benötigen und in welchem ​​Format 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");
30
ambodi

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 um 90 Grad mit der Mitte des Textankers
  2. Übersetze den Text am Mittelpunkt
    • x-Position: um eine Überlappung der Beschriftungen der y-Achse zu verhindern (-50)
    • y-Position: Zum Anpassen des Mittelpunkts 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')
    ;

Dadurch wird verhindert, dass das gesamte Koordinatensystem gedreht wird, wie oben in lubar erwähnt.

12
Michael Clark

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

Wenn Sie ein herkömmliches Diagramm wünschen, d. H. Ein Achsenpaar, Achsenbeschriftungen, einen Diagrammtitel und einen Plotbereich, sehen Sie sich d3fc an. Es ist eine Open-Source-Sammlung von D3-Komponenten auf höherer Ebene. Es enthält eine kartesische Kartenkomponente, die genau das ist, was Sie brauchen:

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

1
ColinE

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

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

parseTime könnte genauso gut den Trick für die Skalierung von Tagen mit einem Datumsformat machen?

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

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

oder

xAxis: {
   axisLabel: 'Label here'
},
0
Ravi Tej