错误：< g>的值无效attribute transform =" translate（undefined，undefined）" [英] Error: Invalid value for <g> attribute transform="translate(undefined,undefined)"

问题描述

我遇到了群集d3.js的问题。它给出了以下错误：

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

错误：属性变换的值无效=translate（undefined，undefined）

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

我不知道为什么会这样给我。

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

代码：

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的新手。

推荐答案

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

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

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

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

这篇关于错误：< g>的值无效attribute transform =" translate（undefined，undefined）"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！