Question

我最近询问如何在这个组中创建一个没有固定坐标的SVG pologyn，而stringman5提供了解决问题的提示，请参阅d3js/svg - Polygon without fixed coordinates?中的完整讨论。

我已经在我的实现中提供了解决方案stringman5，我现在在JavaScript控制台中收到错误。

我已经在此消息的末尾包含了我正在使用的所有代码以及我在html.textarea中给出的输入边缘示例。

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

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

知道这个错误发生的原因吗？

谢谢，
艾尔诺

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Polygon Test</title>
        <link rel="stylesheet" type="text/css" href="PolygonTest.css">
    </head>
    <body>
        <table>
            <tr><td><div id="svgContent"></div></td></tr>
            <tr><th align="left">Give edges</th></tr>
            <tr><td><textarea id="edgeFile" cols=30 rows=20></textarea></td></tr>
            <tr><td><button type="button" onclick="constNet()">Construct Network</button></td></tr>
        </table>  
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script src="PolygonTest.js" charset="utf-8"></script>
    </body>
</html>

PolygonTest.css

line {
    stroke: #000000; /* Black */
    stroke-width: 1;
}
text {
    font: 10px sans-serif;
    pointer-events: none;
}

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(' ');
            }
        );
    }
}

输入边缘示例：

d3js / svg - 没有固定坐标的多边形 - 建议的解决方案不起作用？

0 个答案: