Отображение текста под осью X (D3) - PullRequest
Новая
       17

Отображение текста под осью X (D3)

0 голосов
/ 28 ноября 2018

Я новичок в 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");
});
...