Wie rotieren und ändern der font-Größe auf der x-Achse

Ich bin neu in D3 und ich bin versucht, einige Diagramme erstellen, basierend auf Wetter - (Temperatur -) Daten. Ich habe eine separate js-Datei mit meinem code, so dass alle die charts aufgerufen werden, von einer HTML-Seite. Allerdings hat die x-Achse ist sehr unübersichtlich, da habe ich täglich die Daten angezeigt.
Hier ist die Haupt-js-Datei - wie mache ich die x-Achse rotieren und einfügen von Leerzeichen zwischen den Tagen anzeigen? Oder alternativ einfach nur zeigen, jeden Monat (April, Mai, Juni, usw.) anstatt jeden Tag?

(function (){
  var VIZ = {};
  var margin = {top: 20, right: 55, bottom: 50, left: 20},
   width  = 1000 - margin.left - margin.right,
  height = 500  - margin.top  - margin.bottom;

var parseDate = d3.time.format("%d/%m/%Y").parse;

var x = d3.scale.ordinal()
  .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
  .rangeRound([height, 0]);

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");

var color = d3.scale.ordinal()
  .range(['blue', 'red', 'green','yellow']);

var svg = d3.select("#chart").append("svg")
  .attr("id", "thesvg")
  .attr("viewBox", "0 0 1000 500")
  .attr("width",  width  + margin.left + margin.right)
  .attr("height", height + margin.top  + margin.bottom)
.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 function make_x_axis() {        
  return d3.svg.axis()
      .scale(x)
       .orient("bottom")
       .ticks(20)
 }

 function make_y_axis() {        
  return d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(20)
 }

 VIZ.stackChart = function (data, offset) {
 var stack = d3.layout.stack()
    .values(function (d) { return d.values; })
    .x(function (d) { return x(d.label) + x.rangeBand() / 2; })
    .y(function (d) { return d.value; });

 var area = d3.svg.area()
    .interpolate("cardinal")
    .x(function (d) { return x(d.label) + x.rangeBand() / 2; })
    .y0(function (d) { return y(d.y0); })
    .y1(function (d) { return y(d.y0 + d.y); });

 var labelVar = 'date';
 var varNames = d3.keys(data[0])
    .filter(function (key) { return key !== labelVar;});
 color.domain(varNames);

 var seriesArr = [], series = {};
 varNames.forEach(function (name) {
  series[name] = {name: name, values:[]};
  seriesArr.push(series[name]);
 });

 data.forEach(function (d) {
  varNames.map(function (name) {
    series[name].values.push({name: name, label: d[labelVar], value: +d[name]});
  });
 });

 x.domain(data.map(function (d) { return d.date; }));

 stack.offset(offset)
 stack(seriesArr);

 y.domain([0, d3.max(seriesArr, function (c) { 
    return d3.max(c.values, function (d) { return d.y0 + d.y; });
  })]);

 var selection = svg.selectAll(".series")
  .data(seriesArr)
  .enter().append("g")
    .attr("class", "series");


 selection.append("path")
  .attr("class", "streamPath")
  .attr("d", function (d) { return area(d.values); })
  .style("fill", function (d) { return color(d.name); })
  .style("stroke", "grey");

var points = svg.selectAll(".seriesPoints")
  .data(seriesArr)
  .enter().append("g")
    .attr("class", "seriesPoints");

points.selectAll(".point")
  .data(function (d) { return d.values; })
  .enter().append("circle")
   .attr("class", "point")
   .attr("cx", function (d) { return x(d.label) + x.rangeBand() / 2; })
   .attr("cy", function (d) { return y(d.y0 + d.y); })
   .attr("r", "10px")
   .style("fill",function (d) { return color(d.name); })
   .on("mouseover", function (d) { showPopover.call(this, d); })
   .on("mouseout",  function (d) { removePopovers(); })

drawAxis();
drawLegend(varNames);
}

VIZ.lineChart = function (data) {
var line = d3.svg.line()
    .interpolate("linear")
    .x(function (d) { return x(d.label) + x.rangeBand() / 2; })
    .y(function (d) { return y(d.value); });

var labelVar = 'date';
var varNames = d3.keys(data[0]).filter(function (key) { return key !== labelVar;});
color.domain(varNames);

var seriesData = varNames.map(function (name) {
  return {
    name: name,
    values: data.map(function (d) {
      return {name: name, label: d[labelVar], value: +d[name]};
    })
  };
});

x.domain(data.map(function (d) { return d.date; }));
y.domain([
  d3.min(seriesData, function (c) { 
    return d3.min(c.values, function (d) { return d.value; });
  }),
  d3.max(seriesData, function (c) { 
    return d3.max(c.values, function (d) { return d.value; });
  })
 ]);

 svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)

 svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)


var series = svg.selectAll(".series")
    .data(seriesData)
  .enter().append("g")
    .attr("class", "series");

series.append("path")
  .attr("class", "line")
  .attr("d", function (d) { return line(d.values); })
  .style("stroke", function (d) { return color(d.name); })
  .style("stroke-width", "4px")
  .style("fill", "none")

series.selectAll(".linePoint")
  .data(function (d) { return d.values; })
  .enter().append("circle")
   .attr("class", "linePoint")
   .attr("cx", function (d) { return x(d.label) + x.rangeBand()/2; })
   .attr("cy", function (d) { return y(d.value); })
   .attr("r", "5px")
   .style("fill", function (d) { return color(d.name); })
   .style("stroke", "grey")
   .style("stroke-width", "1px")
   .on("mouseover", function (d) { showPopover.call(this, d); })
   .on("mouseout",  function (d) { removePopovers(); })

svg.append("g")         
      .attr("class", "grid")
      .attr("transform", "translate(0," + height + ")")
      .call(make_x_axis()
          .tickSize(-height, 0, 0)
          .tickFormat("")
      )

  svg.append("g")         
      .attr("class", "grid")
      .call(make_y_axis()
          .tickSize(-width, 0, 0)
          .tickFormat("")
      )

drawAxis();
drawLegend(varNames);
}

VIZ.stackBarChart = function (data) {
var labelVar = 'date';
var varNames = d3.keys(data[0]).filter(function (key) { return key !== labelVar;});
color.domain(varNames);

data.forEach(function (d) {
  var y0 = 0;
  d.mapping = varNames.map(function (name) { 
    return {
      name: name,
      label: d[labelVar],
      y0: y0,
      y1: y0 += +d[name]
    };
  });
  d.total = d.mapping[d.mapping.length - 1].y1;
});

x.domain(data.map(function (d) { return d.date; }));
y.domain([0, d3.max(data, function (d) { return d.total; })]);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", function(d) {
            return "rotate(-65)" 
            });

 svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
  .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("");

 var selection = svg.selectAll(".series")
    .data(data)
  .enter().append("g")
    .attr("class", "series")
    .attr("transform", function (d) { return "translate(" + x(d.date) + ",0)"; });

 selection.selectAll("rect")
  .data(function (d) { return d.mapping; })
.enter().append("rect")
  .attr("width", x.rangeBand())
  .attr("y", function (d) { return y(d.y1); })
  .attr("height", function (d) { return y(d.y0) - y(d.y1); })
  .style("fill", function (d) { return color(d.name); })
  .style("stroke", "grey")
  .on("mouseover", function (d) { showPopover.call(this, d); })
  .on("mouseout",  function (d) { removePopovers(); })

drawAxis();
drawLegend(varNames);
}

VIZ.clearAll = function () {
svg.selectAll("*").remove()
}

function drawAxis() {
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
  .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Maximum Temperature");
}

function drawLegend (varNames) {
var legend = svg.selectAll(".legend")
    .data(varNames.slice().reverse())
  .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function (d, i) { return "translate(55," + i * 20 + ")"; });

legend.append("rect")
    .attr("x", width - 10)
    .attr("width", 10)
    .attr("height", 10)
    .style("fill", color)
    .style("stroke", "grey");

legend.append("text")
    .attr("x", width - 12)
    .attr("y", 6)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function (d) { return d; });
 }

function removePopovers () {
$('.popover').each(function() {
  $(this).remove();
}); 
}

function showPopover (d) {
$(this).popover({
  title: d.name,
  placement: 'auto top',
  container: 'body',
  trigger: 'manual',
  html : true,
  content: function() { 
    return "Date: " + d.label + 
           "<br/>Temperature: " + d3.format(",")(d.value ? d.value: d.y1 - d.y0); }
});
$(this).popover('show')
}

VIZ.onResize = function () {
var aspect = 1000 / 500, chart = $("#thesvg");
var targetWidth = chart.parent().width();
chart.attr("width", targetWidth);
chart.attr("height", targetWidth / aspect);
}

window.VIZ = VIZ;

}())

InformationsquelleAutor Jason Burns | 2014-12-08

  1. 10

    Können Sie drehen, Texte in x-Achse mit der transform-Attribut. 

    svg.select(".x.axis")
  .selectAll("text")
  .attr("transform"," translate(0,15) rotate(-65)"); //To rotate the texts on x axis. Translate y position a little bit to prevent overlapping on axis line.
  .style("font-size","15px"); //To change the font size of texts

    Verwenden tickformat Funktion von d3 Maßstab für die Formatierung des Datums. Zur Anzeige nur der Monat aus dem Datum, können Sie folgenden code verwenden.

    var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')        
    .tickFormat(d3.time.format('%B'));

    Update:

    Ich denke, es wäre besser, wenn Sie reduzieren die Anzahl der Zecken mit Zecken Methode, um Texte lesbar.

    xAxis.ticks(d3.time.day, 20);

    Finden Sie mehr über d3 svg-Achse von hier und über Zeit-Formate von hier

    Danke für die Antwort, aber ich bin immer noch stecken, so dass ich hoffe, Sie können mir helfen-nun habe ich den text zu drehen, aber der text ist zu nah beieinander, Wenn ich den tickformat oben vorgeschlagen, die x-und y-Achse verschwinden
    Reduzieren Sie die Schriftgröße von Texten ein wenig mehr. Es wird hilfreich sein für das Verständnis der Problematik, wenn Sie hinzufügen, einen screenshot des Diagramms.

    InformationsquelleAutor Gilsha

Schreibe einen Kommentar