javascript 错误：<g> 属性值无效 transform="translate(undefined,undefined)"

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

提问by FullyHumanProgrammer

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

我在使用 d3.js 时遇到了集群问题。它给了我以下错误：

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

错误：属性转换的无效值="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.

我是 d3 的新手。

回答by Gilsha

The reason for this error is, d.xand d.yproperties are undefinedat sometimes.

这样做的原因是错误，d.x和d.y性能undefined的时候。

Seems like not every object in nodesarray have xand yproperties. Verify it by console logging nodesarray.

似乎并非nodes数组中的每个对象都具有x和y属性。通过控制台日志记录nodes阵列验证它。