尝试使用 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);

我的小提琴在：http://jsfiddle.net/abhimita/MnX23/

我没有看到任何图表，但无法弄清楚我做错了什么。任何帮助将不胜感激。

Answer 1

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

3.如果你需要活跃，你需要听力布局的滴答事件

            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/

Answer 2

在圈子里你必须提到cx和cy属性和x1,y1,x2,y2属性行

• x1 属性定义了 x 轴上直线的起点
• y1 属性定义了 y 轴上直线的起点
• x2 属性定义了 x 轴上线的终点
• y2 属性定义了 y 轴上的行尾

试试这个代码：

DEMO

   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);

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