почему галочки xaxis и yaxis не отображаются на осях в D3? - PullRequest
Новая
       4

почему галочки xaxis и yaxis не отображаются на осях в D3?

0 голосов
/ 17 апреля 2020

Я использую d3 v5 для создания визуализации данных CSV-файла с тремя столбцами. Код, который я написал для осей, dr aws, но галочки не отображаются. Когда я непосредственно вводю целые числа в домен, появляются галочки, но, видимо, домен не получает максимальное значение из моих данных. Мне нужна помощь с этим, пожалуйста. 

var dataset = [];

var w = 1000;
var h = 600;
var padding = 30;


d3.csv("nobel-prize.csv", d3.autoType(), function(d) {
    return {
        Year: +d.Year,
        Women: +d.Women,
        Men: +d.Men
    };

}).then(function(data) {

    dataset = data;

    console.log(data);


});

var xScale = d3.scaleLinear()
               .domain([0, d3.max(dataset, d => d.Year)])
               .range([padding, w - padding * 2])
               .nice();


var yScale = d3.scaleLinear()
               .domain([0, d3.max(dataset, d => d.Men)])
               .range([h - padding, padding])
               .nice();


var xAxis = d3.axisBottom()
              .scale(xScale)

var yAxis = d3.axisLeft()
              .scale(yScale)


var svg = d3.select("svg")

            .attr("width", w)
            .attr("height", h);

            svg.append("g")
            .call(xAxis)
            .attr("class", "axis")
            .attr("transform", "translate(0, " + (h - padding) + ")")


         svg.append("g")
            .call(yAxis)
            .attr("class", "axis")
            .attr("transform", "translate(" + padding + ", 0)")

1 Ответ

0 голосов
/ 18 апреля 2020

Весь код, расположенный после функции .then, запускается до извлечения данных CSV, следовательно, когда dataset является пустым массивом.

Код, определяющий оси и рисующий диаграмму, должен быть соответственно перемещен внутри функции .then. 

.then(function(data) {

    dataset = data;

    console.log(data);

   // here

});

Другое замечание: в настоящее время определена шкала x, показывающая все годы между 0 и максимумом набора данных: 

.domain([0, d3.max(dataset, d => d.Year)])

Предполагается, что На диаграмме будут отображаться лауреаты Нобелевской премии. Вероятно, вы хотите, чтобы диаграмма началась в 1901 году (или используйте значение min, указанное в наборе данных).

...