x 축에서 글꼴 크기를 변경하고 회전하는 방법

Question

D3을 처음 사용하고 날씨 (기온) 데이터를 기반으로 차트를 만들려고합니다. 모든 차트가 하나의 HTML 페이지에서 호출되도록 코드와 별도의 js 파일을 만들었습니다. 그러나 매일 데이터가 표시되기 때문에 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; 

}()) 

Answer 1

변환 속성을 사용하여 x 축에서 텍스트를 회전 할 수 있습니다.

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 

tickformat 날짜 형식에 대해 기능을 사용하십시오. 날짜에서 한 달 만 표시하려면 아래 코드를 사용하십시오.

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

업데이트 :

나는 생각한다, 당신은 텍스트를 읽을 수 있도록 틱 방법을 사용하여 진드기의 수를 줄일 수 있다면 좋을 것입니다.

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

그래서 - 난 이제 텍스트를 가지고 당신이 날 도울 수 있기를 바랍니다 당신은 답장을 here