javascript - 尝试使用 d3.js 构建图形

Question

我是 d3 的新手，正在尝试进行图形布局。

        var w = 1000;
        var h = 500;
        var dataset = {
            nodes: [{
                name: 'Aden'
            }, {
                name: 'Bob'
            }, {
                name: 'Sue'
            }],
            edges: [{
                source: 0,
                target: 1
            }, {
                source: 1,
                target: 2
            }]
        };
        var svg = d3.select("body")
            .append("svg")
            .attr("height", h)
            .attr("width", w);

        var force = d3.layout.force()
            .nodes(dataset.nodes)
            .links(dataset.edges)
            .size([w, h])
            .linkDistance([50])
            .start();

        var nodes = svg.selectAll("circle")
            .data(dataset.nodes)
            .enter()
            .append("circle")
            .attr("r", 10)
            .style("fill", "red")
            .call(force.drag);

        var edges = svg.selectAll("line")
            .data(dataset.edges)
            .enter()
            .append("line")
            .style("stroke", "#ccc")
            .style("stroke-width", 1);

我的 fiddle 在:http://jsfiddle.net/abhimita/MnX23/

我没有看到任何图表，但无法弄清楚我做错了什么。非常感谢任何帮助。

Answer 1

1.你需要设置圆的cx和cy来定位圆 2.需要设置线的x1 y1,x2 y2到定位线

3.如果需要active需要监听强制布局的tick事件

            var w = 300;
            var h = 300;
            var dataset = {
                nodes: [{
                    name: 'Aden'
                }, {
                    name: 'Bob'
                }, {
                    name: 'Sue'
                }],
                edges: [{
                    source: 0,
                    target: 1
                }, {
                    source: 1,
                    target: 2
                }]
            };
            var svg = d3.select("body")
                .append("svg")
                .attr("height", h)
                .attr("width", w);

            var force = d3.layout.force()
                .nodes(dataset.nodes)
                .links(dataset.edges)
                .size([w, h])
            .on("tick", tick) // listener tick to listen position change 
                .linkDistance([50])
                .start();

            var nodes = svg.selectAll("circle")
                .data(dataset.nodes)
                .enter()
                .append("circle")
                .attr("r", 10)
            // set cx cy of circle to position the circle
            .attr("cx", function (d) {return d.x; })
            .attr("cy", function (d) { return d.y; })
                .style("fill", "red")
                .call(force.drag);

            var edges = svg.selectAll("line")
                .data(dataset.edges)
                .enter()
                .append("line")
            // set x1, y1, x2, y2 to position the line
            .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;
            })
                .style("stroke", "#ccc")
                .style("stroke-width", 1);

// make it actively
function tick(e) {
     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; });
}

演示更新:http://jsfiddle.net/MnX23/3/