CODEWITHSUNDEEP
javascripthtmlnode.jsd3.js
glass_chain
glass_chain

Reputation: 13

Uncaught TypeError: canvas.selectAll(...).data(...).enter is not a function in d3

I have 2 errors coming up when I try to run my code for d3.

The first is:

Failed to load resource: net::ERR_CONNECTION_REFUSED

and the second:

Uncaught TypeError: canvas.selectAll(...).data(...).enter is not a function

I'm using MEAN with mongoose as my ORM, with handlebars for the HTML and v4 of d3.

<p>graph displayed here
</p>
<script>
d3.json("graphdata.json", function(dataArray) {
  console.log(dataArray);
  var width = 500;
  var height = 500;
  console.log(width);

  var widthScale = d3.scaleLinear().domain([0, 420]).range([0, width]);
  var color = d3.scaleLinear().domain([0, 420]).range(["red", "blue"]);
  var xAxis = d3.axisBottom(widthScale);

  var canvas = d3.select("p")
    .append("svg")
    .attr("width", width)
    .attr("height", height);


  var bar = canvas.selectAll("rect")
    .data(dataArray)
    .enter()
    .append("rect")
    .attr("width", function(d) {
      return d.age * 10;
    })
    .attr("height", 50)
    .attr("y", function(d, i) {
      return i * 50
    })
    .attr("fill", "blue");


  canvas.selectAll("text")
    .data(dataArray)
    .enter()
    .append("text")
    .attr("fill", "white")
    .attr("y", function(d, i) {
      return i * 50 + 24;
    })
    .text(function(d) {
      return d.name;
    });


});
</script>

and for

graphdata.json

[
  {"age":10,"name":"one"},
  {"age":20,"name":"two"},
  {"age":30,"name":"three"},
  {"age":40,"name":"four"},
  {"age":50,"name":"five"},
  {"age":60,"name":"six"}
]

Upvotes: 1

Views: 3334

Answers (1)

Denise Mauldin
Denise Mauldin

Reputation: 5615

Your JSON fetch is failing (ERR_CONNECTION_REFUSED), so your dataArray is empty and that's causing .data to fail. You should troubleshoot why your graphdata.json is failing to load by looking at the Angular/Node/Mongo logs.

Upvotes: 1

Related Questions