JavaScript刷新文件内容

Question

I am having D3 JS load the contents of a file (which has CSV values). 我正在使用D3 JS加载文件的内容（具有CSV值）。 However the values in the file will change. 但是，文件中的值将更改。 Without refreshing the whole browser window, how can I get it to pull in the new data? 在不刷新整个浏览器窗口的情况下，如何获取新数据？

This is my code at the moment: 这是我目前的代码：

<!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>

I think I might need to call data.forEach(function(d) again? But I've tried this: 我想可能需要再次调用data.forEach(function(d) ？

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

Answer 1

You have to call d3.csv() again to check for updates. 您必须再次调用d3.csv（）来检查更新。
See here for an extended example: 请参见此处的扩展示例：
http://bl.ocks.org/d3noob/6bd13f974d6516f3e491 http://bl.ocks.org/d3noob/6bd13f974d6516f3e491

Answer 2

d3.csv() will pass file contents to it's callback at the time it is execution. d3.csv()在执行时会将文件内容传递到其回调中。 It doesn't matter how many times you loop over the data inside the callback, it will be the same data that you are looping over. 遍历回调内部的数据并不重要，它将与您遍历的数据相同。

To load the data again, you should call d3.csv() again which will call the callback with the new data. 要再次加载数据，您应该再次调用d3.csv() ，它将使用新数据调用回调。

See my example below (untested) when I have extracted the callback to a named function, and called d3.csv every minute. 将回调提取到命名函数并每分钟调用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>

JavaScript刷新文件内容

问题描述

2 个解决方案

解决方案1
1 2018-08-10 14:19:45

解决方案2
1 已采纳 2018-08-10 14:24:16

JavaScript刷新文件内容

问题描述

2 个解决方案

解决方案1 1 2018-08-10 14:19:45

解决方案2 1 已采纳 2018-08-10 14:24:16

解决方案1
1 2018-08-10 14:19:45

解决方案2
1 已采纳 2018-08-10 14:24:16