D3强制创建未定义节点

时间:2018-07-05 11:43:00

标签: javascript html csv d3.js svg

我现在想只用一个链接创建一个力量。但是,当我执行代码时,它会打印出来:

TypeError: M is undefined

该程序的目标是从csv中打印值(csv当前具有一个值),该值带有汇款之类的不同机构的名称,例如row。 Conselleria到其他机构,例如Tercer

执行代码后,console.log会打印los nodes son is undefined,尽管在我执行第一个console.log时会正确初始化数组。

任何帮助将不胜感激。

function fetchData(){
d3.csv("export1.csv",function(csv){

    for(var i=0;i<csv.length;i++){
        var row = csv[i];
        var addConselleria={};
        var addTercer={};
        var addConnections= {};
        addConselleria.name = row.Conselleria;
        addTercer.name = row.Tercer;
        addConnections.source = 0;
        addConnections.target = 1;
        nodes.push(addConselleria);
        nodes.push(addTercer);
        connections.push(addConnections);
    }
console.log(nodes);
createForce();
});
}


function createForce(){
    console.log("los nodes son",nodes);
    console.log("las conexiones son",connections);

    var force = d3.layout.force()   
                .nodes(nodes)
                .links(connections)
                .size([h,w])
                .start();
    var svg = d3.select("body")
                .append("svg")
                .attr("width",w)
                .attr("height",h);


    //Create edges as lines
    var edges = svg.selectAll("line")
                .data(connections)
                .enter()
                .append("line")
                .style("stroke", "#ccc")
                .style("stroke-width", 1);

    //Create nodes as circles
    var nodes = svg.selectAll("circle")
                .data(nodes)
                .enter()
                .append("circle")
                .attr("r", 10)
                .style("fill","yellow") ;
        //Add a simple tooltip
    nodes.append("title")
                .text(function(d) {
                return d.name;
             });
                //Every time the simulation "ticks", this will be called
    force.on("tick", function() {
            edges.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; });

            nodes.attr("cx", function(d) { return d.x; })
                 .attr("cy", function(d) { return d.y; });
        });

}

0 个答案:

没有答案