我是D3.js的初学者。我试图在x轴下显示文本,但未显示。有人可以帮我吗?
这是我的csv文件:
stib,bikes
Herrmann-Debroux,2.4
Houba-Brugmann,2
Louiza,3.2
Centraal Station,3.2
Park,2
这是我的js文件:
d3.csv("metroVillo.csv")
.row(function(d) { return {bikes:Number(d.bikes)}; })
.get(function(error, data) {
var width = 1000;
var height = 600;
var max = d3.max(data, function(d) { return d.bikes; });
var y = d3.scaleLinear()
.domain([0,max])
.range([height,0]);
var x = d3.scaleLinear()
.domain(function(d) { return d.stib })
.range([0, width]);
var yAxis = d3.axisLeft(y).tickFormat(function(d) { return d + "%"; }).tickPadding(10).tickSize(10);
var xAxis = d3.axisBottom(x).tickPadding(10).tickSize(10);
制作svg元素:
var svg = d3.select("body").append("svg").attr("width", "100%").attr("height", "100%");
var margin = {top:50 , right:0 , bottom:0 , left:70};
var chartGroup = svg.append("g").attr("transform", "translate("+margin.left+","+margin.top+")");
显示x轴和y轴:
chartGroup.append("g").attr("class", "x axis")
.call(xAxis)
.attr("transform", "translate(0, "+height+")")
.append("text")
.attr("transform", "rotate(0)")
.attr("y", "0.85em")
.attr("x", width + margin.top-10)
.text("Metro stations");
chartGroup.append("g").attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", "0em")
.attr("y", "1.5em")
.text("N° bike_stands");
});