Question

我正在尝试使用d3js创建一个树图，其中两个节点相互连接。我的JS如下：

var width = window.innerWidth;
var height = window.innerHeight;

var nodes = [{"id":"1","name":"a"},{"id":"2","name":"b"}];
var links = [{"source":0,"target":1}];

var svg = d3.select("body").append("svg");
svg.attr("width", width);
svg.attr("height", height);
svg.append("svg:g");

var tree = d3.layout.tree();
tree.size([width, height]);
tree.nodes(nodes);
tree.links(links);

var diagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

  var link = svg.selectAll(".link")
      .data(links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);

  var node = svg.selectAll(".node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

  node.append("circle")
      .attr("r", 4.5);

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

所以我将SVG的宽度和高度设置为等于窗口宽度/高度。然而，一切都在右上方聚集。

我的JS小提琴：https://jsfiddle.net/eeLfog4m/1/

有什么想法吗？

什么是有用的是一个没有所有花里胡哨的d3js演示。 http://bl.ocks.org/mbostock/4063550旋转中心周围的一切。 http://bl.ocks.org/d3noob/8375092似乎有很多额外的代码用于处理节点的重绘/折叠，而https://github.com/mbostock/d3/wiki/Tree-Layout根本没有任何示例。

Answer 1

您看到左上角被压扁的原因是因为所有属性都是NaN或undefined。这是因为你正在使用

.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

和

.attr("transform", function(d) { 
         return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; 
 });

正在访问未定义的d.x和d.y。

理想情况下，d.x和d.y由d3.layout.tree()等布局算法生成。但是，在您提供的代码中，传递给树布局算法的数据不正确。

d3.tree.layout()期望分层数据结构，而您提供链接和节点，如果没有一些主要的解决方法，这将无法工作。如果你想使用树形布局，我建议你将数据转换为层次结构，然后将其可视化。这是一个做这个的例子

var width = window.innerWidth;
var height = window.innerHeight;

var root = {
 "name": "1",
 "children": [
  {"name": "2"}
 ]
};

var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

var tree = d3.layout.tree()
          .size([width, height-40]);

var nodes = tree.nodes(root);
var links = tree.links(nodes);

var path = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y;  });

  var link = svg.selectAll(".link")
      .data(links)
      .enter()
      .append("path")
      .attr("class", "link")
      .attr("stroke", "black")
      .attr("stroke-width", 2);
      .attr("d", function(d){
        return path([d.source, d.target])
      });

  var node = svg.selectAll(".node")
      .data(nodes)
      .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) {
        return "translate(" + d.x + "," + (d.y + 20) + ")";       })

  node.append("circle")
      .attr("r", 4.5);

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

但是，如果您想坚持使用当前数据格式：

var nodes = [{"id":"1","name":"a"},{"id":"2","name":"b"}];
var links = [{"source":0,"target":1}];

你应该使用强制导向布局。

以下是使用您拥有的数据结构的强制定向布局的示例（http://jsfiddle.net/ankit89/3kL11j6j/）

var graph = {
 "nodes": [
     {"name": "Leo"},
     {"name": "Mike"},
     {"name": "Raph"},
     {"name": "Don"},
     {"name": "Splinter"}
],
"links": [
    {"source": 0, "target": 4, "relation": "son"},
    {"source": 1, "target": 4, "relation": "son"},
    {"source": 2, "target": 4, "relation": "son"},
    {"source": 3, "target": 4, "relation": "son"}
]}


var force = d3.layout.force()
    .nodes(graph.nodes)
    .links(graph.links)
    .size([400, 400])
    .linkDistance(120)
    .charge(-30)
    .start();


 var svg = d3.select("svg");

var link = svg.selectAll("line")
.data(graph.links)
.enter().append("line")
.style("stroke", "black");

var node = svg.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", 20)
.style("fill", "grey")
.call(force.drag);

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("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
})

最后，您不一定需要d3布局，甚至可以像这样使用自定义布局

http://jsfiddle.net/ankit89/uts5orrd/5/

var graph = {
 "nodes": [
     {"name": "Leo", "level": 1},
     {"name": "Mike", "level": 1},
     {"name": "Raph", "level": 1},
     {"name": "Don", "level": 1},
     {"name": "Splinter", "level": 2}
],
"links": [
    {"source": 0, "target": 4, "relation": "son"},
    {"source": 1, "target": 4, "relation": "son"},
    {"source": 2, "target": 4, "relation": "son"},
    {"source": 3, "target": 4, "relation": "son"}
]}

 var svg = d3.select("svg");

svg.selectAll("circle")
.data(graph.nodes)
.enter()
.append("circle")
.attr({
    "cx": function(d, i){
        var x;
        if(d.level == 1){
            x = i*100 + 100;
        }else{
            x = 250;
        }
        d.x = x;
        return x;
     },
    "cy": function(d, i){
            var y;
            if(d.level == 1){
                y = 260;
            }else{
                y = 60;
            }

            d.y = y;
            return y;
        },
    "r" : 30,
    "fill": "gray",
    "opacity": .5
})

svg.selectAll("text")
.data(graph.nodes)
.enter()
.append("text")
.attr({
    "x": function(d){return d.x},
    "y": function(d){return d.y},
    fill: "steelblue"
})
.text(function(d){
    return d.name;
})


svg.selectAll("line")
.data(graph.links)
.enter()
.append("line")
.attr({
    "x1": sourceX,
    "y1": sourceY,
    "x2": targetX,
    "y2": targetY,
    "stroke-width": 2,
    "stroke": "grey"
})

function sourceX(d, i){
    var t = graph.nodes[d.source].x;
    return t;
}

function sourceY(d, i){
    var t = graph.nodes[d.source].y;
    return t;
}

function targetX(d, i){
    var t = graph.nodes[d.target].x;
    return t;
}

function targetY(d, i){
    var t = graph.nodes[d.target].y;
    return t;
}
//console.log(graph.nodes)

以下是故事的要点：

如果使用d3布局，请使您的数据结构与布局预期的数据结构相匹配，d3将为您计算x和y坐标。
如果使用想要自定义布局，请编写函数以确定节点和链接的x和y坐标。

d3.js树形布局将所有内容聚集在顶部

1 个答案: