错误：<g>属性transform =“translate（undefined，undefined）”的值无效

Question

我对群集的d3.js有问题。 它给了我以下错误：

错误：属性变换的值无效=“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

出现此错误的原因是，有时dx和dy属性undefined 。

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