The D3 chart encountered an issue with zooming and returned an error message stating "Unable to retrieve the length property of an undefined

Question

The D3 chart encountered an issue with zooming and returned an error message stating "Unable to retrieve the length property of an undefined

I encountered an issue with my d3.v4 charts when zooming, resulting in the error message "Cannot read property 'length' of undefined" at line 'grp.select(".area").attr("d", area.x(function(d) {return xt(d);}));'. The browser console displayed:

**Uncaught TypeError: Cannot read property 'length' of undefined
    at SVGPathElement.t (d3.v4.min.js:2)
    at SVGPathElement.<anonymous> (d3.v4.min.js:2)
    at pt.each (d3.v4.min.js:2)
    at pt.attr (d3.v4.min.js:2)
    at SVGSVGElement.zoomed (pen.js:69)
    at p.apply (d3.v4.min.js:2)
    at N (d3.v4.min.js:2)
    at c.emit (d3.v4.min.js:2)
    at c.zoom (d3.v4.min.js:2)
    at d3.v4.min.js:2**

I need assistance resolving this error. You can view a CodePen example through the following link https://codepen.io/rohitbagde/pen/ZXEVRp

var dataArray=[11,14,27,30,43,47,60,69,77,100];
var dataMonths=[1,2,3,4,5,6,7,8,9,10];
var dataDate=[1,2,3,4,5,6,7,8,9,10];

var height=150;
var width=1000;
var parseMonth= d3.timeParse('%m');
var area = d3.area().x(function(d,i){return x(parseMonth(dataMonths[i]));} )
            .y0(height)
            .y1(function(d){return y(d);});


var svg = d3.select("body").append("svg").attr("height","100%").attr("width","100%");

var grp=svg.append('g').attr('transform','translate(40,0)').attr("class", "charts");

// Domain is referred to data i.e. x-axis
//This for y scale
var y=d3.scaleLinear().domain([0,200]).range([150,0]);
var x=d3.scaleTime()
.domain([d3.min(dataMonths,function(d){ return parseMonth(d);}),
        d3.max(dataMonths,function(d){ return parseMonth(d);})])
.range([0,1000]);

//This is for yaxis
var yAxis=d3.axisLeft(y).ticks(5).tickPadding(10);
var xAxis=d3.axisBottom(x);

grp.append('g').attr('class','axis y').call(yAxis);
grp.append('g').attr('class','axis x').attr('transform','translate(0,150)').call(xAxis);

//for plotting lines
grp.append("path")
  .attr("fill","none")
.attr("stroke","black")
.attr("stroke-width","2")
.attr("class", "area")
  .attr("d",area(dataArray));

//For plotting points
grp.selectAll("circle.grpcircle")
.data(dataArray)
.enter().append("circle")
.attr("class","circle")
.attr("cx",function(d,i){return x(parseMonth(dataMonths[i]));})
.attr("cy",function(d){return y(d);})
.attr("r",'4') 



 //For zooming
var zoom = d3.zoom()
    .scaleExtent([1, 32])
    .translateExtent([[0, 0], [width, height]])
    .extent([[0, 0], [width, height]])
    .on("zoom", zoomed);

var d0=parseMonth(1);
var d1=parseMonth(12);
 svg.call(zoom).transition()
      .duration(1500)
      .call(zoom.transform, d3.zoomIdentity
          .scale(width / (x(d1) - x(d0)))
          .translate(-x(d0), 0)); 

function zoomed() {
  var t = d3.event.transform, xt = t.rescaleX(x);
  area.x(function(d) {alert("Hi");return xt(d);});

  grp.select(".area").attr("d", area.x(function(d) {return xt(d);}));
  grp.select(".x").call(xAxis.scale(xt));
}

javascript angularjs d3.js

Answer 1

Answer №1

To make it work, you need to initially bind the data array to the SVG path.

//for plotting lines
grp.append("path")
  .datum(dataArray)
  .attr("fill","none")
  .attr("stroke","black")
  .attr("stroke-width","2")
  .attr("class", "area")
  .attr("d",area);

var dataArray = [11, 14, 27, 30, 43, 47, 60, 69, 77, 100];
var dataMonths = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var dataDate = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var height = 150;
var width = 1000;
var parseMonth = d3.timeParse('%m');
var area = d3.area().x(function(d, i) {
    return x(parseMonth(dataMonths[i]));
  })
  .y0(height)
  .y1(function(d) {
    return y(d);
  });


var svg = d3.select("body").append("svg").attr("height", "100%").attr("width", "100%");


svg.append("defs").append("clipPath")
  .attr("id", "clip")
  .append("rect")
  .attr("width", width)
  .attr("height", height);

var grp = svg.append('g').attr('transform', 'translate(40,0)').attr("class", "charts");

// Domain represents data for x-axis
//This is for y scale
var y = d3.scaleLinear().domain([0, 200]).range([150, 0]);
var x = d3.scaleTime()
  .domain([d3.min(dataMonths, function(d) {
      return parseMonth(d);
    }),
    d3.max(dataMonths, function(d) {
      return parseMonth(d);
    })
  ])
  .range([0, 1000]);

//This is for y axis
var yAxis = d3.axisLeft(y).ticks(5).tickPadding(10);
var xAxis = d3.axisBottom(x);

grp.append('g').attr('class', 'axis y').call(yAxis);
grp.append('g').attr('class', 'axis x').attr('transform', 'translate(0,150)').call(xAxis);

//for plotting lines
grp.append("path")
  .datum(dataArray)
  .attr("fill", "none")
  .attr("stroke", "black")
  .attr("stroke-width", "2")
  .attr("class", "area1")
  .attr("d", area);

grp.selectAll("circle.grpcircle")
  .data(dataArray)
  .enter().append("circle")
  .attr("class", "circle")
  .attr("cx", function(d, i) {
    return x(parseMonth(dataMonths[i]));
  })
  .attr("cy", function(d) {
    return y(d);
  })
  .attr("r", '4')

//For zooming
var zoom = d3.zoom()
  .scaleExtent([1, 32])
  .translateExtent([
    [0, 0],
    [width, height]
  ])
  .extent([
    [0, 0],
    [width, height]
  ])
  .on("zoom", zoomed);

var d0 = parseMonth(1);
var d1 = parseMonth(12);
svg.call(zoom).transition()
  .duration(1500)
  .call(zoom.transform, d3.zoomIdentity
    .scale(width / (x(d1) - x(d0)))
    .translate(-x(d0), 0));

function zoomed() {
  var t = d3.event.transform,
    xt = t.rescaleX(x);
  grp.select(".area1").attr("d", area.x(function(d, i) {
    return xt(parseMonth(dataMonths[i]));
  }));
  grp.select(".x").call(xAxis.scale(xt));
  grp.selectAll("circle")
    .attr("cx", function(d, i) {
      return xt(parseMonth(dataMonths[i]));
    });
}

html,
body {
  height: 100%;
}

.area1 {
  clip-path: url(#clip);
}

<body>

  <script src="https://d3js.org/d3.v4.min.js"></script>
</body>

Answer 2

To make it work, you need to initially bind the data array to the SVG path.

//for plotting lines
grp.append("path")
  .datum(dataArray)
  .attr("fill","none")
  .attr("stroke","black")
  .attr("stroke-width","2")
  .attr("class", "area")
  .attr("d",area);

var dataArray = [11, 14, 27, 30, 43, 47, 60, 69, 77, 100];
var dataMonths = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var dataDate = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var height = 150;
var width = 1000;
var parseMonth = d3.timeParse('%m');
var area = d3.area().x(function(d, i) {
    return x(parseMonth(dataMonths[i]));
  })
  .y0(height)
  .y1(function(d) {
    return y(d);
  });


var svg = d3.select("body").append("svg").attr("height", "100%").attr("width", "100%");


svg.append("defs").append("clipPath")
  .attr("id", "clip")
  .append("rect")
  .attr("width", width)
  .attr("height", height);

var grp = svg.append('g').attr('transform', 'translate(40,0)').attr("class", "charts");

// Domain represents data for x-axis
//This is for y scale
var y = d3.scaleLinear().domain([0, 200]).range([150, 0]);
var x = d3.scaleTime()
  .domain([d3.min(dataMonths, function(d) {
      return parseMonth(d);
    }),
    d3.max(dataMonths, function(d) {
      return parseMonth(d);
    })
  ])
  .range([0, 1000]);

//This is for y axis
var yAxis = d3.axisLeft(y).ticks(5).tickPadding(10);
var xAxis = d3.axisBottom(x);

grp.append('g').attr('class', 'axis y').call(yAxis);
grp.append('g').attr('class', 'axis x').attr('transform', 'translate(0,150)').call(xAxis);

//for plotting lines
grp.append("path")
  .datum(dataArray)
  .attr("fill", "none")
  .attr("stroke", "black")
  .attr("stroke-width", "2")
  .attr("class", "area1")
  .attr("d", area);

grp.selectAll("circle.grpcircle")
  .data(dataArray)
  .enter().append("circle")
  .attr("class", "circle")
  .attr("cx", function(d, i) {
    return x(parseMonth(dataMonths[i]));
  })
  .attr("cy", function(d) {
    return y(d);
  })
  .attr("r", '4')

//For zooming
var zoom = d3.zoom()
  .scaleExtent([1, 32])
  .translateExtent([
    [0, 0],
    [width, height]
  ])
  .extent([
    [0, 0],
    [width, height]
  ])
  .on("zoom", zoomed);

var d0 = parseMonth(1);
var d1 = parseMonth(12);
svg.call(zoom).transition()
  .duration(1500)
  .call(zoom.transform, d3.zoomIdentity
    .scale(width / (x(d1) - x(d0)))
    .translate(-x(d0), 0));

function zoomed() {
  var t = d3.event.transform,
    xt = t.rescaleX(x);
  grp.select(".area1").attr("d", area.x(function(d, i) {
    return xt(parseMonth(dataMonths[i]));
  }));
  grp.select(".x").call(xAxis.scale(xt));
  grp.selectAll("circle")
    .attr("cx", function(d, i) {
      return xt(parseMonth(dataMonths[i]));
    });
}

html,
body {
  height: 100%;
}

.area1 {
  clip-path: url(#clip);
}

<body>

  <script src="https://d3js.org/d3.v4.min.js"></script>
</body>

The D3 chart encountered an issue with zooming and returned an error message stating "Unable to retrieve the length property of an undefined

Answer №1

Similar questions

Menu selection that changes dynamically based on radio button selection

When utilizing res.redirect in Express, an error is triggered stating "Uncaught SyntaxError: Unexpected token <""

The view has no access to $scope but the controller does

Creating a dynamic input box with an add/remove button in each row using jQuery

Eliminate blank double quotation marks in a JavaScript string

What is the correct method for accessing $event in VueJS on Firefox after clicking an element?

Leveraging Shared Workers within a React application

Guide on how to navigate to a different webpage once the ajax request is complete

Invoke a PHP function within the current file

Is there a way to resolve an alert issue in Vue JS?

Troubleshoot the issue of the service function not being triggered

Modifying icons with JavaScript

Utilizing Angular for enhanced search functionality by sending multiple query parameters

Retrieve information from the Firebase database in order to update a text string

Transforming HTML 'img' elements into React components without losing styling: How do I achieve this with html-to-react?

Unable to terminate ChildProcess on Ubuntu

The 'exhaustive-deps' warning constantly insists on requiring the complete 'props' object instead of accepting individual 'props' methods as dependencies

Troubleshooting: Issues with MongoDB Aggregation not reflecting updates in my collection

Exploring different ways to make API requests using technologies like jQuery, Angular, and more

Updating an array element in Mongoose, the MongoDB ORM