CODEWITHSUNDEEP
javascriptcsvd3.js
Marl Xtian Monzon Marcera
Marl Xtian Monzon Marcera

Reputation: 85

CSV File opened using JS not showing the updated version of the file when replaced by another one with the same name. d3.csv

Before everything is said, I've not much knowledge about using JS and especially not d3.csv. These are all code taken from a template from the internet. Altho, I am pretty sure the problem lies within the file being saved in the Cache.

But for specificity's sake, I'm going to post the code.

On our page is a button that opens a table that takes it's values from the data in a CSV file.

This is the code in the HTML, the function which calls the script to view the table.

<script>
    $(".bar-tab").click(function() 
      {
        $.getScript("js/d3-bar.js"); 
      })
</script>

This is the "d3-bar.js" script itself.

!(function (d3) {

$("barcontent").empty();

var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

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

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


var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

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

var chart = d3.select(".chart")
    .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("data/bar-data.csv", type, function(error, data) {
  x.domain(data.map(function(d) { return d.name; }));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);

  chart.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  chart.append("g")
      .attr("class", "y axis")
      .call(yAxis);

  chart.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.name); })
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
      .attr("width", x.rangeBand());
});

function type(d) {
  d.value = +d.value; // coerce to number
  return d;
}
})(d3);

The problem with this is that when we replace the "bar-data.csv" file with another one, for we need to change it from time to time, it doesn't change. It changes when we manually clear the cache. Which brings us to what we think is the reason that causing the problem. Is there a way to bypass this? For the browser to not check the cache for the file we need?

Upvotes: 0

Views: 316

Answers (2)

XerXeX
XerXeX

Reputation: 792

This is a common problem. You can work around this by adding a random GET request after the file type like "data/bar-data.csv?version=123"

Upvotes: 1

Joseph
Joseph

Reputation: 119847

It's caching working like it's supposed to.

A quick way to do this is to just "bust the cache". This is normally done by adding useless query parameter to the url with a value that's always different on each request. Timestamps are good values for this. The browser will think the url is new, and it will request a fresh copy of it instead of the one it cached.

d3.csv(`data/bar-data.csv?t=${Date.now()}`, type, function(error, data) {

Alternatively, if you have access to server-side configuration, you can probably tell the server to tell the browser to not cache certain paths served. This would depend on the server software you're using though, so read their respective manuals.

Upvotes: 2

Related Questions