在x轴(D3)下显示文本

时间:2018-11-28 18:45:05

标签: d3.js text axis-labels

我是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");
});

0 个答案:

没有答案