javascript - 错误 : Invalid value for <g> attribute transform ="translate(undefined,undefined)"

Question

我在集群中遇到 d3.js 问题。它给了我以下错误:

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

我不知道为什么它会给我。

代码:

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");
};

我是 d3 的新手。

Answer 1

这个错误的原因是，d.x 和d.y 属性有时是undefined。

似乎并不是 nodes 数组中的每个对象都具有 x 和 y 属性。通过控制台记录 nodes 数组来验证它。