3

我对 D3.js 相当陌生，并试图理解为什么我的这个示例版本不起作用。我也用这个例子作为参考。

据我所知，问题出在我的tick功能上；当我注释掉它时，svg 对象被写入文档，但是没有 svg 被写入。

这是我的代码：

// CSS 样式
    。关联 {
        中风：#ccc；
    }
    .node {
        指针事件：无；
        字体：10px 无衬线；
    }
// 结束 CSS 样式

// 在正文中开始 JS
// 数据集
var 数据节点 =
[
    {id: "N1", name: "First 1", type: "Type 1"},
    {id：“N2”，名称：“节点 2”，类型：“类型 3”}，
    {id：“N3”，名称：“节点 3”，类型：“类型 4”}
];

var 数据链接 =
[
    {sourceId：“N1”，linkName：“关系1”，targetId：“N2”}，
    {sourceId：“N3”，linkName：“关系2”，targetId：“N1”}，
    {sourceId：“N2”，linkName：“关系 3”，targetId：“N1”}
];

变量 w = 960;
变量 h = 500;
变量节点；
变种链接；
变种根；

var svg = d3.select("body")
            .append("svg")
            .attr("宽度",w)
            .attr("高度",h);

var node_hash = [];
var type_hash = [];

nodeSet.forEach(函数(d,i){
    节点哈希[d.id] = d;
    type_hash[d.type] = d.type;
});

linkSet.forEach(函数(d,i){
    d.source = node_hash[d.sourceId];
    d.target = node_hash[d.sourceId];
});

var force = d3.layout.force()
              .charge(-1000)
              .nodes（数据节点）
              .links（数据链接）
              .size([w,h])
              .linkDistance(100)
              .on（“滴答声”，滴答声）
              。开始（）;

var links = svg.selectAll(".glink")
                .data(froce.links())
                。进入（）
                .append("g")
                .attr("类","gLink")
                .append("行")
                .attr("类","链接")
                .style("中风","#ccc");

var node = svg.selectAll(".node")
                .data(froce.nodes())
                。进入（）
                .append("g")
                .attr("类","节点")
                .call(force.drag);

节点
    .append("圆")
    .attr("x", 函数(d){
        返回 dx；
    })
    .attr("y",函数(d){
        返回 dy;
    })
    .attr("r", 10)
    .style ("填充","白色")
    .style("笔画宽度",2)
    .style("中风", "黑色")
    .call(force.drag);

功能滴答（）{
    链接
        .attr("x1",函数(d){
            返回d.source.x；
        })
        .attr("y1",function(){
            返回d.source.y；
        })
        .attr("x2",函数{
            返回 d.target.x;
        })
        .attr("y2",函数{
            返回 d.target.y;
        });

    node.attr("变换",function(d){
        返回 "翻译("+d.x+","+d.y+")";
    });

};
// 在正文中结束 JS

任何帮助，将不胜感激。

4

0 回答 0