Javascript d3js/svg-没有固定坐标的多边形-建议的解决方案无效？

我最近询问如何在这个组中创建一个没有固定坐标的SVG pologyn，stringman5善意地给出了解决问题的提示，请参阅中的完整讨论

我在实现中包含了stringman5建议的解决方案，现在JavaScript控制台中出现了一个错误

我已经在这条消息的末尾包括了我正在使用的所有代码，以及我在html.textarea中给出的一个输入边缘示例

下面是我收到的确切错误消息

Uncaught TypeError:  PolygonTest.js: 88
undefined is not a function

知道为什么会发生这种错误吗

谢谢，
埃尔诺

PolygonTest.js

function constNet() {
    var edgeRows = document.getElementById("edgeFile").value.split("\n");
    var nodeIdIntIds = {};
    var nodes = [];
    var edges = [];

    for (var i = 0; i < edgeRows.length; i++) {
    var row = edgeRows[i];
    var cols = row.split("\t");
    var sNodeId = cols[0].trim();
    var tNodeId = cols[1].trim();
    var sNodeIntId;
    if (!nodeIdIntIds.hasOwnProperty(sNodeId)) {
        sNodeIntId = Object.keys(nodeIdIntIds).length;
        var sNode = {name: sNodeId, id:sNodeIntId, fixed:false};
        nodes[nodes.length] = sNode;
        nodeIdIntIds[sNodeId] = true;
    }
    var tNodeIntId;
    if (!nodeIdIntIds.hasOwnProperty(tNodeId)) {
        tNodeIntId = Object.keys(nodeIdIntIds).length;
        var tNode = {name: tNodeId, id:tNodeIntId, fixed:false};
        nodes[nodes.length] = tNode;
        nodeIdIntIds[tNodeId] = true;
    }
    edges[edges.length] = {source:sNodeIntId, target:tNodeIntId};
}

var WIDTH = 2000;
var HEIGHT = 2000;
var svg = d3.select("#svgContent")
    .append("svg")
    .attr("width", WIDTH)
    .attr("height", HEIGHT)
    .attr('preserveAspectRatio', 'xMinYMin slice') 
    .append('g');

var dataSet = {nodes: nodes, edges: edges};

var force = d3.layout.force()
    .nodes(dataSet.nodes)
    .links(dataSet.edges)
    .size([WIDTH,HEIGHT])
    .linkStrength(0.1)
    .friction(0.9)
    .linkDistance(60)
    .charge(-300)
    .on("tick", tick)
    .start();

  var link = svg.selectAll(".link")
    .data(dataSet.edges)
    .enter().append("line")
    .attr("class", "link")
    .attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

var node = svg.selectAll("polygon")
    .data(nodes)
    .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

node.append("polygon")
    .attr("fill", "#00ff00")    /* Green */
    .attr("stroke", "#ffffff")  /* White */
    .attr("stroke-width", "1.5px");

node.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });

function tick() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });
    node
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    node
        .attr(
            'points',
            function(d){
                return d.map(
                    function(d) {
                        return [d.x,d.y].join(',');
                    }
                ).join(' ');
            }
        );
    }
}

---

我确信这不是实际的问题，但是肯定有很多

函数（d）{

引用，其中一些是嵌套的。第88行

引用似乎是
返回d.map（
如果
d
未定义或里面没有
map
函数，它可能对应于未定义的函数调用。谢谢你的评论！你是对的，错误发生在返回d.map中。我还认为它与未定义的函数调用有某种关系。在谷歌搜索之后，我得到了这种类型的印象内部循环往往容易出现错误，但在这种情况下，我看不到任何其他解决方法。因此，我认为我现在将把这个问题放在一边，从而尝试在没有多边形的情况下生存。如果出现新想法，也许我会在稍后再讨论这个问题。
line {
    stroke: #000000; /* Black */
    stroke-width: 1;
}
text {
    font: 10px sans-serif;
    pointer-events: none;
}

function constNet() {
    var edgeRows = document.getElementById("edgeFile").value.split("\n");
    var nodeIdIntIds = {};
    var nodes = [];
    var edges = [];

    for (var i = 0; i < edgeRows.length; i++) {
    var row = edgeRows[i];
    var cols = row.split("\t");
    var sNodeId = cols[0].trim();
    var tNodeId = cols[1].trim();
    var sNodeIntId;
    if (!nodeIdIntIds.hasOwnProperty(sNodeId)) {
        sNodeIntId = Object.keys(nodeIdIntIds).length;
        var sNode = {name: sNodeId, id:sNodeIntId, fixed:false};
        nodes[nodes.length] = sNode;
        nodeIdIntIds[sNodeId] = true;
    }
    var tNodeIntId;
    if (!nodeIdIntIds.hasOwnProperty(tNodeId)) {
        tNodeIntId = Object.keys(nodeIdIntIds).length;
        var tNode = {name: tNodeId, id:tNodeIntId, fixed:false};
        nodes[nodes.length] = tNode;
        nodeIdIntIds[tNodeId] = true;
    }
    edges[edges.length] = {source:sNodeIntId, target:tNodeIntId};
}

var WIDTH = 2000;
var HEIGHT = 2000;
var svg = d3.select("#svgContent")
    .append("svg")
    .attr("width", WIDTH)
    .attr("height", HEIGHT)
    .attr('preserveAspectRatio', 'xMinYMin slice') 
    .append('g');

var dataSet = {nodes: nodes, edges: edges};

var force = d3.layout.force()
    .nodes(dataSet.nodes)
    .links(dataSet.edges)
    .size([WIDTH,HEIGHT])
    .linkStrength(0.1)
    .friction(0.9)
    .linkDistance(60)
    .charge(-300)
    .on("tick", tick)
    .start();

  var link = svg.selectAll(".link")
    .data(dataSet.edges)
    .enter().append("line")
    .attr("class", "link")
    .attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

var node = svg.selectAll("polygon")
    .data(nodes)
    .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

node.append("polygon")
    .attr("fill", "#00ff00")    /* Green */
    .attr("stroke", "#ffffff")  /* White */
    .attr("stroke-width", "1.5px");

node.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });

function tick() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });
    node
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    node
        .attr(
            'points',
            function(d){
                return d.map(
                    function(d) {
                        return [d.x,d.y].join(',');
                    }
                ).join(' ');
            }
        );
    }
}

1    2
3    4
1    4
2    5
6    1
1    5
2    1
5    1
2    1
7    9
8    1
8    2
1    3
10    5
6    7
11    6
8    5
5    11
2    7
12    5
13    4
5    14
14    12
14    1
14    4
15    10
16    11
16    17
17    18
17    19
19    20
21    8
21    22
23    3
24    4
25    6
26    2