D3.js v5 не отображает никаких данных, используя d3.tsv () - PullRequest
Новая
       12

D3.js v5 не отображает никаких данных, используя d3.tsv ()

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

Я использую D3 v5, чтобы загрузить и нарисовать мои данные, которые выглядят следующим образом: 

game_id attendance  team1   team2   goals   tie pk  stage   round   year    date    time    stadium home    lat long    referee booked  url
1   25000   Italy   USA 7-1 False   False   FIRST ROUND False   1934    27-05-1934 (16:00 h)    16:00   Stadio Nazionale del PNF (Roma) Italy   41.926953   12.472197   René Mercet (SWI)      1934_ITALY_FS.htm
2   16000   Austria France  3-2 False   False   FIRST ROUND False   1934    27-05-1934 (16:30 h)    16:30   Benito Mussolini (Torino)   Italy   45.066251   7.691228    John van Moorsel (NED)      1934_ITALY_FS.htm

Код использует d3.tsv() для загрузки и анализа данных: 

format = d3.timeFormat("%d-%m-%Y (%H:%M h)");
d3.tsv("world_cup_geo.tsv", function(d) {
  d['date'] = format.parse(d['date']);
  d['attendance'] = +d['attendance'];
  return d;
}, draw);

Однако при этом отображаются только оси без рендеринга кругов, представляющих загруженные данные:

enter image description here

Остальной код выглядит следующим образом: 

function draw(data) {

  "use strict";
  var margin = 75,
    width = 1400 - margin,
    height = 600 - margin;

  var radius = 3;
  var color = "blue";

  var svg = d3.select("body")
    .append("svg")
    .attr("width", width + margin)
    .attr("height", height + margin)
    .append('g')
    .attr('class', 'chart');


  d3.select('svg')
    .selectAll("circle")
    .data(data)
    .enter()
    .append("circle");


  // find min and max in data using extent.
  var time_extent = d3.extent(data, function(d) {
    return d['date'];
  });

  var count_extent = d3.extent(data, function(d) {
    return d['attendance'];
  });

  // scaling domaine <-> range
  var time_scale = d3.scaleTime()
    .range([margin, width])
    .domain([time_extent]);

  var count_scale = d3.scaleLinear()
    .range([height, margin])
    .domain([count_extent]);

  var time_axis = d3.axisBottom()
    .scale(time_scale)
    .ticks(d3.timeYear, 2);

  var count_axis = d3.axisLeft()
    .scale(count_scale);

  // adding the axes to the page
  d3.select("svg")
    .append('g')
    .attr('class', 'x axis')
    .attr('transform', "translate(0," + height + ")")
    .call(time_axis);

  d3.select("svg")
    .append('g')
    .attr('class', 'y axis')
    .attr('transform', "translate(" + margin + ", 0)")
    .call(count_axis);

  d3.selectAll("circle")
    .attr("cx", function(d) {
      return time_scale(d["date"]);
    })
    .attr("cy", function(d) {
      return count_scale(d["attendance"]);
    })
    .attr("r", radius)
    .attr("fill", color);
};

1 Ответ

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

спасибо за ваши ответы, это было очень полезно.Я делаю код работающим, я также внес некоторые изменения. вот окончательный результат

Сначала я заметил, что здесь допустил одну ошибку: 

     var time_scale = d3.scaleTime()
    .range([margin, width])
    .domain([time_extent]);

  var count_scale = d3.scaleLinear()
    .range([height, margin])
    .domain([count_extent]);

нет необходимости в скобках вокруг time_extend и count_extent в качествефункция d3.extent будет возвращать интервал (список) [min, max].

Я также внес изменения в скрипт внутри тега bady следующим образом: 

  <script type="text/javascript">
var parseTime  = d3.timeParse("%d-%m-%Y (%H:%M h)")
// format = d3.timeFormat("%d-%m-%Y (%H:%M h)");
d3.tsv("world_cup_geo.tsv", function(d) {
  d['date'] = parseTime(d['date']);
  d['attendance'] = +d['attendance'];
  return d;
})
.then(draw);

наконец, я сделал еще одно изменение, чтобы сделать некоторые стили для меток на оси x 

      d3.select("svg")
    .append('g')
    .attr('class', 'x axis')
    .attr('transform', "translate(0," + height + ")")
    .call(time_axis)
    .selectAll("text")
      .style( "text-anchor","end")
      .attr("dx", "3em")
      .attr("dy", ".15em")
      .attr("transform", function(d) {
        return "rotate(+65)"
        });

Единственное, что я не мог понять, это как просто отобразить данные для каждой секунды.год, а не каждый год.Я пытался сделать это с помощью d3.timeYears (начало, остановка, шаг), но безуспешно, поэтому я просто сохранил d3.timeYear, который принимает все точки.

...