Question

我正在使用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);

但是，这仅显示轴，而未绘制任何表示已加载数据的圆：

其余代码如下：

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);
};

Answer 1

感谢您的回答，这非常有帮助。我使代码正常工作，我也做了一些更改。 here is the final result

首先，我注意到我在这里犯了一个错误：

     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，它占用了每一点。

D3.js v5不使用d3.tsv（）显示任何数据

1 个答案: