Содержимое файла обновления javascript

У меня D3 JS загружает содержимое файла (который имеет значения CSV). Однако значения в файле изменятся. Как я могу заставить его получать новые данные, не обновляя все окно браузера?

Это мой код на данный момент:

<!DOCTYPE html>
<meta charset="utf-8">


<body>

<script src="d3.v3.min.js"></script>

<script>

var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%Y-%m").parse;

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%Y-%m"));

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")");

d3.csv("test2.csv", function(error, data) {

    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.value = +d.value;
    });

  x.domain(data.map(function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" );

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Value ($)");

  svg.selectAll("bar")
      .data(data)
    .enter().append("rect")
      .style("fill", "steelblue")
      .attr("x", function(d) { return x(d.date); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); });

});

</script>

</body>

Я думаю, мне, возможно, придется снова вызвать в data.forEach(function(d)? Но я пробовал это:

<script>
var int=self.setInterval(data.forEach(function(d), 60000);
</script>

похоже, что при установке интервала вы используете функцию (d) без тела, поэтому ничего не выполняется.

Alex Yokisama 10.08.2018 16:15

@AlexYokisama Спасибо за помощь. Я не понимаю, что вы имеете в виду, я боюсь :(

Jimmy 10.08.2018 16:16

Привет, Джимми. Здесь не нужно использовать тройные обратные кавычки - они ничего не делают. В некоторых версиях Markdown они используются для форматирования блочного кода, но это не поддерживается на сайтах Stack Exchange. Пожалуйста, используйте одинарные обратные кавычки, чтобы ваши вопросы было легче редактировать в будущем.

halfer 12.08.2018 14:34

Мы также предпочитаем технический стиль письма. Мы мягко не приветствуем приветствия, надеемся, что вы можете помочь, спасибо, заранее спасибо, благодарственные письма, приветы, добрые пожелания, подписи, пожалуйста, не могли бы вы помочь, болтливый материал и сокращенный txtspk, мольбу, как долго вы был застрял, советы по голосованию, мета-комментарии и т. д. Просто объясните свою проблему и покажите, что вы пробовали, чего вы ожидали и что на самом деле произошло.

halfer 12.08.2018 14:41
0
4
97
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вам нужно снова вызвать d3.csv (), чтобы проверить наличие обновлений. См. Здесь расширенный пример:
http://bl.ocks.org/d3noob/6bd13f974d6516f3e491

Ответ принят как подходящий

d3.csv() передаст содержимое файла функции обратного вызова во время выполнения. Неважно, сколько раз вы перебираете данные внутри обратного вызова, это будут те же данные, которые вы перебираете.

Чтобы загрузить данные снова, вы должны снова вызвать d3.csv(), который вызовет обратный вызов с новыми данными.

См. Мой пример ниже (непроверенный), когда я извлек обратный вызов для именованной функции и каждую минуту вызываю d3.csv.

<!DOCTYPE html>
<meta charset="utf-8">


<body>

<script src="d3.v3.min.js"></script>

<script>

var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%Y-%m").parse;

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%Y-%m"));

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")");

// Created a reusable function for the callback
function handleCsvData(error, data) {

  data.forEach(function(d) {
      d.date = parseDate(d.date);
      d.value = +d.value;
  });

  x.domain(data.map(function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" );

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Value ($)");

  svg.selectAll("bar")
      .data(data)
      .enter().append("rect")
      .style("fill", "steelblue")
      .attr("x", function(d) { return x(d.date); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); });

}

// Call d3.csv every minute and pass contents to callback
var csvReloadInterval = setInterval(d3.csv("test2.csv", handleCsvData), 60000);
// Call d3.csv for the first time
d3.csv("test2.csv", handleCsvData);

</script>

</body>

вы должны сначала очистить svg в начале рисования

rioV8 10.08.2018 18:03

Другие вопросы по теме