2

在我的项目中，我想使用 d3.js 强制布局和以下数据绘制图表。

Nodes --> [{"name":"http://dbpedia.org/ontology/abstract","type":"s","group":0},
{"name":"http://www.w3.org/2002/07/owl#DatatypeProperty","type":"o","group":1},
{"name":"http://dbpedia.org/ontology/wikiPageID","type":"s","group":2},
{"name":"http://www.w3.org/2002/07/owl#backwardCompatibleWith","type":"s","group":4},
{"name":"http://www.w3.org/2002/07/owl#OntologyProperty","type":"o","group":5},
{"name":"http://dbpedia.org/ontology/birthDate","type":"s","group":6}, 
{"name":"http://dbpedia.org/ontology/deathDate","type":"s","group":8},
{"name":"http://dbpedia-live.openlinksw.com/sparql","type":"s","group":10},  
{"name":"http://www.w3.org/ns/sparql-service-description#Service","type":"o","group":11},
{"name":"http://www.w3.org/2002/07/owl#incompatibleWith","type":"s","group":12},
{"name":"http://www.w3.org/2002/07/owl#priorVersion","type":"s","group":14},
{"name":"http://dbpedia.org/ontology/wikiPageRevisionID","type":"s","group":16},
{"name":"http://www.w3.org/2002/07/owl#imports","type":"s","group":18}]

Links --> [{"source":0,"target":1,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200},
{"source":2,"target":1,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200},
{"source":4,"target":5,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200},
{"source":6,"target":1,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200},
{"source":8,"target":1,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200},
{"source":10,"target":11,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200},
{"source":12,"target":5,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200},
{"source":14,"target":5,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200},
{"source":16,"target":1,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200},
{"source":18,"target":5,"uri":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type","weight":1,"value":200}]

此数据已以这种格式动态准备。在javascript代码中 force.start(); 函数已被调用“无法读取未定义的属性‘权重’”已引发错误。这个相关的问题对我没有帮助，那么我能做什么来防止这个错误。此外，链接数组为空或某些链接已被删除，或者当我使用“miserables.json”作为数据 javascript 时，下面的 javascript 可以成功运行。

<script type="text/javascript">
    var w = 900,
        h = 900;
    var color = d3.scale.category10();

    var nodes = eval('(' + '${graphDrawer.nodes}' + ')');


    var links = eval('(' + '${graphDrawer.links}' + ')');

    var vis = d3.select("#activationGraphDiv").append("svg:svg")
        .attr("width", w)
        .attr("height", h);

        var force = d3.layout.force()
            .gravity(.05)
            .linkDistance(100)
            .charge(-200)
            .size([w, h]);

        var link = vis.selectAll("line.link")
            .data(links)
            .enter().append("svg: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 = vis.selectAll("g.node")
            .data(nodes)
            .enter().append("svg:g")
            .attr("class", "node")
            .on("mouseover", nodeMouseover)
            .on("mouseout", nodeMouseout);

        node.append("circle")
            .attr("r",10) // Node radius
        .style("fill", "white") // Make the nodes hollow looking
        .style("stroke-width", 4) // Give the node strokes some thickness
        .style("stroke", function(d) { return color(d.group); } ) // Node stroke colors
        .call(force.drag);

        node.append("svg:text")
            .attr("class", "nodetext")
            .attr("dx", 26)
            .attr("dy", ".35em")
            .text(function(d) { return d.name });

        node.append("title")
            .text(function(d) { return d.name; });

        force.on("tick", function() {
          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+ ")"; });
        });

        force
          .nodes(nodes)
          .links(links)
          .start();

        function nodeMouseover() {
            d3.select(this).select("circle").transition()
              .duration(250)
              .attr("r",function(d){
                    return 20;
            });
            d3.select(this).select("text").transition()
              .duration(250)
              .style("font", "bold 20px Arial")
              .attr("fill", "Blue");
          }

        function nodeMouseout() {
            d3.select(this).select("circle").transition()
               .duration(250)
               .attr("r",function(d){
                    return 10;
            });
            d3.select(this).select("text").transition()
               .duration(250)
               .attr("fill", "Blue")
               .style("font", function(d){
                    return "normal 12px Arial";
               });
          }
    </script>

感谢您的帮助：D

4

0 回答 0