Error: Invalid value for <g> attribute transform="translate(undefined,undefined)"

Question

I am having a problem with d3.js with the cluster. It gives me the following error:

Error: Invalid value for attribute transform="translate(undefined,undefined)"

And I have no idea why this gives it to me.

Code:

var loadd3 = function () {

    function elbow(d, i) {
        return "M" + (d.source.y + 100) + "," + d.source.x + "V" + d.target.x + "H" + (d.target.y + 100);
    }

    var width = (window.innerWidth - 100),
      height = (window.innerHeight - 20);

    var cluster = d3.layout.cluster()
      .size([height, width - 160]);

    var diagonal = d3.svg.diagonal()
      .projection(function (d) {
          return [d.y, d.x];
      });

    d3.select("svg").remove();

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(40,0)");

    var root = dataSource;

    var nodes = cluster.nodes(root),
      links = cluster.links(nodes);

    var link = svg.selectAll(".link")
      .data(links)
      .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);

    var node = svg.selectAll(".node")
      .data(nodes)
      .enter().append("g")
      .attr("class", "node")
      .attr("transform", function (d) {
          return "translate(" + d.y + "," + d.x + ")";
      })

    node.append("rect")
      .attr("width", 120)
      .attr("height", 60)
      .attr("y", -30)
      .attr("rx", 5)
      .attr("ry", 5);

    node.append("rect")
      .attr("class", "header")
      .attr("width", 120)
      .attr("height", 10)
      .attr("y", -30)
      .attr("rx", 5)
      .attr("ry", 5);

    node.append("text")
      .attr("x", function (d) {
          return d.children ? 60 : 15
      })
      .attr("dy", -6)
      .attr("class", function (d) {
          return d.children ? "" : "url";
      })
      .on("click", function (d) {
          if (!d.children) {
              window.open("http://google.com");
          }
      })

    .style("text-anchor", function (d) {
        return d.children ? "end" : "start";
    })
      .text(function (d) {
          return d.BaanNo;
      });

    node.append("text")
      .attr("x", function (d) {
          return d.children ? 60 : 15
      })
      .attr("dy", 12)
      .style("text-anchor", function (d) {
          return d.children ? "end" : "start";
      })
      .text(function (d) {
          return d.OrderId;
      });

    node.append("text")
      .attr("x", function (d) {
          return d.children ? 60 : 15
      })
      .attr("dy", 12)
      .style("text-anchor", function (d) {
          return d.children ? "end" : "start";
      })
      .text(function (d) {
          return d.ItNo;
      });

    node.append("text")
      .attr("x", function (d) {
          return d.children ? 60 : 15
      })
      .attr("dy", 12)
      .style("text-anchor", function (d) {
          return d.children ? "end" : "start";
      })
      .text(function (d) {
          return d.dateTime;
      });

    node.append("text")
      .attr("x", function (d) {
          return d.children ? 60 : 15
      })
      .attr("dy", 12)
      .style("text-anchor", function (d) {
          return d.children ? "end" : "start";
      })
      .text(function (d) {
          return d.gewicht;
      });

    d3.select(self.frameElement).style("height", height + "px");
};

I am new to d3.

Answer 1

The reason for this error is, d.x and d.y properties are undefined at sometimes.

Seems like not every object in nodes array have x and y properties. Verify it by console logging nodes array.