спасибо за ваши ответы, это было очень полезно.Я делаю код работающим, я также внес некоторые изменения. вот окончательный результат
Сначала я заметил, что здесь допустил одну ошибку:
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, который принимает все точки.