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

在圈子中，您必须提及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; });
            });

Answer 2

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/

使用d3.js尝试构建图

2 个答案: