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
d3.json("graphdata.json", function(dataArray) {
  var width = 500;
  var height = 500;

  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")
    .attr("width", width)
    .attr("height", height);

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

    .attr("fill", "white")
    .attr("y", function(d, i) {
      return i * 50 + 24;
    .text(function(d) {
      return d.name;


and for





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.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.