D3 error with data file

Question

i'm on the project for finishing my degree on computation, and i have a problem with D3, basically it works if I pass the data directly to the code, but with the data on a file, it says "n does not exist". I don't know why is this happening, here's my code:

PD: If anyone needs a sample of my data file, just ask for it.

Thanks in advance!

<code>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Causa básica</title>
<style>
 .axis path, .axis line
        {
            fill: none;
            stroke: #777;
            shape-rendering: crispEdges;
        }

        .axis text
        {
            font-family: 'Arial';
            font-size: 13px;
        }
        .tick
        {
            stroke-dasharray: 1, 2;
        }
        .bar
        {
            fill: FireBrick;
        }
</style>
<svg id="visualisation" width="1000" height="500"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>
InitChart();

function InitChart() {
/*
  var lineData = [{ //don't know if this is needed in source: <script src="http://d3js.org/d3.csv.js">
    'x': 1, //, This is the sample data
    'y': 1.0807955e-01
  }, {
    'x': 2,
    'y': 1.2815365e-01
  }, {
    'x': 3,
    'y': 9.3269178e-02
  }, {
    'x': 4,
    'y': 9.3894191e-02
  }];*/

var lineData;
        d3.tsv("data.tsv", function(data) {
        lineData=data //my data, that doesn't work
        });

  var vis = d3.select("#visualisation"),
    WIDTH = 1000,
    HEIGHT = 500,
    MARGINS = {
      top: 20,
      right: 20,
      bottom: 20,
      left: 50
    },
    xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function (d) {
        return d.x;
      }),
      d3.max(lineData, function (d) {
        return d.x;
      })
    ]),
    yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function (d) {
        return d.y;
      }),
      d3.max(lineData, function (d) {
        return d.y;
      })
    ]),

    xAxis = d3.svg.axis()
      .scale(xRange)
      .tickSize(5)
      .tickSubdivide(true),

    yAxis = d3.svg.axis()
      .scale(yRange)
      .tickSize(5)
      .orient("left")
      .tickSubdivide(true);


  vis.append("svg:g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
    .call(xAxis);

  vis.append("svg:g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + (MARGINS.left) + ",0)")
    .call(yAxis);

  var lineFunc = d3.svg.line()
  .x(function (d) {
    return xRange(d.x);
  })
  .y(function (d) {
    return yRange(d.y);
  })
  .interpolate('basis');

vis.append("svg:path")
  .attr("d", lineFunc(lineData))
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

}

</script>
</code>

score 1 · Accepted Answer · answered Jan 30 '15 at 08:58

1

Asynchronous issue.

the function

    d3.tsv("data.tsv", function(data) {
        lineData=data //my data, that doesn't work
    });

is called after the execution of the rest of code.

You can try to move all the code inside the function and after lineData=data;. Or build a function:

var lineData;
d3.tsv("data.tsv", function(data) {
     seeData(data); 
});
function seeData(lineData) {
  var vis = d3.select("#visualisation"),
  WIDTH = 1000,
  HEIGHT = 500,
  MARGINS = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 50
  },
  // etc etc
}

answered Jan 30 '15 at 08:58

Luca Rainone

16,138
2
38
52

Ok, it's working now, i'm having a new problem with my domain in the function, i'll try to solve it, if i can't, i'll edit this comment with the new situation. Thank you. – Amnor Feb 02 '15 at 08:41
I just cant fix the problem with my y axis, so now it only shows one tick, and some y information is lost, here's my domain code and my data: yRange = d3.scale.linear().range([MARGINS.bottom, MARGINS.top - HEIGHT ]).domain([d3.min(lineData, function (d) { return d.y; }), //DATA IN THE FILE 'x': 1, //, This is the sample data 'y': 1.0807955e-01 }, { 'x': 2, 'y': 1.2815365e-01 }, { 'x': 3, 'y': 9.3269178e-02 }, { 'x': 4, 'y': 9.3894191e-02 },{ 'x': 5, 'y:'8.8194589e-02 }];*/ – Amnor Feb 02 '15 at 09:09

D3 error with data file

1 Answers1