Гистограмма "даты" отображаются странно / бары нажаты - PullRequest
Новая
       7

Гистограмма "даты" отображаются странно / бары нажаты

1 голос
/ 15 июня 2019

Я хочу создать диаграмму, отображающую эмиссию C02.

Проблема (см. Рисунок ниже):

Почему полосы «сдвинуты» вправо?Почему годы по оси x отображаются без первого целого числа?

Я использую версию 3 d3.

Учитывая некоторые данные JSON, подобные этому: 

     [
      {
        "Cement": 0.0,
        "Gas Flaring": 0.0,
        "Gas Fuel": 0.0,
        "Liquid Fuel": 0.0,
        "Per Capita": null,
        "Solid Fuel": 3.0,
        "Total": 3.0,
        "Year": 1751
      }, 
and so on…
]

Чтобы подготовиться к масштабированию, я сделал: 

  var minDate = dataset[0].Year;
  var maxDate = dataset[dataset.length - 1].Year;

 var maxValue = d3.max(dataset, function(d) {
    return d["Per Capita"];
  });

Я добавляю svg 

var svg = d3
    .select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

Я освятил ось и ось: 

  var xAxisScale = d3.time
    .scale()
    .domain([minDate, maxDate])
    .range([0, w]);

  var yAxisScale = d3.scale
    .linear()
    .domain([0, maxValue])
    .range([h, 0]);

Я, наконец, построил эти оси ... 

 var xAxis = d3.svg
    .axis()
    .scale(xAxisScale)
    .orient("bottom");

  var yAxis = d3.svg
    .axis()
    .scale(yAxisScale)
    .orient("left");

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

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

Я также добавил эти строки ... 

  svg
    .selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .style("fill", "teal")
    .attr({
      x: function(d, i) {
        return i * (w / dataset.length);
      },
      y: function(d) {
        return yAxisScale(d["Per Capita"]);
      },
      width: w / dataset.length,
      height: function(d) {
        return h - yAxisScale(d["Per Capita"]);
      }
    });

Результат не намеченный.The bars are

Не могли бы вы уточнить, что пошло не так?

Почему стержни «сдвинуты» вправо?Почему годы по оси x отображаются без первого целого числа?

Я использую d3 версии 3.

Большое спасибо!

1 Ответ

1 голос
/ 15 июня 2019

Основная проблема здесь в том, что это ... 

"Year": 1751

... не является объектом даты. Это просто число. Если вы посмотрите на свою ось, вы поймете это.

Итак, вы должны разобрать это. Например: 

const format = d3.time.format("%Y");
dataset.forEach(function(d){
    d.Year = format.parse(d.Year);
});

Кроме того, когда вы делаете это ... 

var minDate = dataset[0].Year;
var maxDate = dataset[dataset.length - 1].Year;

... ты слепо веришь, что массив отсортирован. Не делай этого. Вместо этого выполните: 

var minDate = d3.max(dataset, function(d){
    return d.Year
});
var maxDate = d3.min(dataset, function(d){
    return d.Year
});

Или, если вы хотите использовать деструктуризацию: 

var [minDate, maxDate] = d3.extent(dataset, d => d.Year);

Наконец, теперь, когда у вас есть правильный масштаб, не используйте индексы для позиции x. Используйте шкалу: 

x: function(d) {
    return xAxisScale(d.Year);
},

Это покрывает проблему относительно позиции x. Для фиксации позиции y просто установите правильное поле.

...