D3.js 如何在x轴上旋转和更改字体大小

我是D3新手，我正在尝试根据天气（温度）数据创建一些图表。我用代码创建了一个单独的js文件，以便从一个HTML页面调用所有图表。但是，x轴非常混乱，因为我每天都显示数据。 这是主js文件-如何使x轴旋转并在显示的日期之间插入空格？或者，只显示每个月（4月、5月、6月等），而不是每天

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

}())

（函数（）{
var VIZ={}；
var margin={顶部：20，右侧：55，底部：50，左侧：20}，
宽度=1000-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var parseDate=d3.time.format（“%d/%m/%Y”）.parse；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
变量y=d3.scale.linear（）
.rangeRound（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var color=d3.scale.ordinal（）
.范围（[‘蓝色’、‘红色’、‘绿色’、‘黄色’）；
var svg=d3.选择（“图表”）.追加（“svg”）
.attr（“id”，“thesvg”）
.attr（“视图框”，“0 0 1000 500”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
函数make_x_axis（）{
返回d3.svg.axis（）
.比例（x）
.orient（“底部”）
.滴答声（20）
}
函数make_y_axis（）{
返回d3.svg.axis（）
.比例（y）
.东方（“左”）
.滴答声（20）
}
即stackChart=功能（数据、偏移）{
var stack=d3.layout.stack（）
.values（函数（d）{返回d.values；}）
.x（函数（d）{返回x（d.label）+x.rangeBand（）/2；}）
.y（函数（d）{返回d.value；}）；
var area=d3.svg.area（）
.插入（“基数”）
.x（函数（d）{返回x（d.label）+x.rangeBand（）/2；}）
.y0（函数（d）{返回y（d.y0）；}）
.y1（函数（d）{返回y（d.y0+d.y）；}）；
var labelVar=‘日期’；
var varNames=d3.keys（数据[0]）
.filter（函数（键）{return key！==labelVar；}）；
颜色。域名（varNames）；
var seriesArr=[]，series={}；
forEach（函数（名称）{
序列[name]={name:name，值：[]}；
seriesArr.push（系列[名称]）；
});
data.forEach（函数（d）{
map（函数（名称）{
series[name].values.push（{name:name，label:d[labelVar]，value:+d[name]}）；
});
});
x、 域（data.map（函数（d）{returnd.date；}））；
堆栈偏移量（偏移量）
堆栈（seriesArr）；
y、 域（[0，d3.max（seriesArr，函数（c）{
返回d3.max（c.values，函数（d）{返回d.y0+d.y；}）；
})]);
var selection=svg.selectAll（“.series”）
.数据（seriesArr）
.enter（）.append（“g”）
.attr（“类别”、“系列”）；
selection.append（“路径”）
.attr（“类”、“流径”）
.attr（“d”，函数（d）{返回区域（d.values）；}）
.style（“fill”，函数（d）{返回颜色（d.name）；}）
.风格（“笔画”、“灰色”）；
var points=svg.selectAll（“.seriesPoints”）
.数据（seriesArr）
.enter（）.append（“g”）
.attr（“类”、“系列点”）；
点。选择全部（“.point”）
.data（函数（d）{返回d.values；}）
.enter（）.append（“圆”）
.attr（“类”、“点”）
.attr（“cx”，函数（d）{返回x（d.label）+x.rangeBand（）/2；}）
.attr（“cy”，函数（d）{返回y（d.y0+d.y）；}）
.attr（“r”，“10px”）
.style（“fill”，函数（d）{返回颜色（d.name）；}）
.on（“mouseover”，函数（d）{showPopover.call（this，d）；}）
.on（“mouseout”，函数（d）{removePopovers（）；}）
牵引轴（）；
绘图图例（varNames）；
}
VIZ.lineChart=功能（数据）{
var line=d3.svg.line（）
.插入（“线性”）
.x（函数（d）{返回x（d.label）+x.rangeBand（）/2；}）
.y（函数（d）{返回y（d.value）；}）；
var labelVar=‘日期’；
var varNames=d3.keys（数据[0]）.filter（函数（键）{return key！==labelVar；}）；
颜色。域名（varNames）；
var seriesData=varNames.map（函数（名称）{
返回{
姓名:姓名,，
值：data.map（函数（d）{
返回{name:name，label:d[labelVar]，值：+d[name]}；
})
};
});
x、 域（data.map（函数（d）{returnd.date；}））；
y、 领域([
d3.min（序列数据，函数（c）{
返回d3.min（c.values，函数（d）{returnd.value；}）；
}),
d3.max（seriesData，函数（c）{
返回d3.max（c.values，函数（d）{返回d.value；}）；
})
]);
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
var series=svg.selectAll（“.series”）
.数据（系列数据）
.enter（）.append（“g”）
.attr（“类别”、“系列”）；
series.append（“路径”）
.attr（“类”、“行”）
.attr（“d”，函数（d）{返回行（d.values）；}）
.style（“笔划”，函数（d）{返回颜色（d.name）；}）
.样式（“笔划宽度”、“4px”）
.style（“填充”、“无”）
系列。选择全部（“.linePoint”）
.data（函数（d）{返回d.values；}）
.enter（）.append（“圆”）
.attr（“类”、“线点”）
.attr（“cx”，函数（d）{返回x（d.label）+x.rangeBand（）/2；}）
.attr（“cy”，函数（d）{返回y（d.value）；}）
.attr（“r”，“5px”）
.style（“fill”，函数（d）{返回颜色（d.name）；}）
.style（“笔划”、“灰色”）
.style（“笔划宽度”、“1px”）
.on（“mouseover”，函数（d）{showPopover.call（this，d）；}）
.on（“mouseout”，函数（d）{removePopovers（）；}）
svg.append（“g”）
.attr（“类”、“网格”）
.attr（“变换”、“平移（0）”、“高度+”）
.调用（生成x轴（）
.tickSize（-height，0，0）
.tick格式（“”）
)
svg.append（“g”）
.attr（“类”、“网格”）
.调用（生成y轴（）
.tickSize（-width，0，0）
.tick格式（“”）
)
牵引轴（）；
绘图图例（varNames）；
}
即stackBarChart=功能（数据）{
var labelVar=‘日期’；
var varNames=d3.keys（数据[0]）.filter（函数（键）{return key！==labelVar；}）；
颜色。域名（varNames）；
数据.f
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

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

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