添加链接到我的节点与d3.js

我testinf d3.js，我试图添加一个根节点（JsFiddle的中心之一）和子节点之间的链接。我怎么能做到这一点？添加链接到我的节点与d3.js

这里是我到目前为止的代码：http://jsfiddle.net/fLqekg12/2/

var container = d3.select("svg#svg"); 
var data = [2, 1, 1, 1, 1, 1, 1]; 

var dataTree = { 
    id: "root", 
    size: 12, 
    children: data.map(function (d) { 
     return { 
      size: 10, 
      parent: "root" 
     }; 
    }) 
}; 

var maxRadius = 50, 
    padding = 40; 

var radiusScale = d3.scale.sqrt() 
    .domain([0, 50 /* d3.max(data) */ ]) 
    .range([0, 50]); // maxRadius 

var roughCircumference = d3.sum(data.map(radiusScale)) * 2 + padding * (data.length - 1), 
    radius = roughCircumference/(Math.PI * 2); 

// make a radial tree layouts 
var tree = d3.layout.tree() 
    .size([360, radius]) 
    .separation(function (a, b) { 
    return radiusScale(a.size) + radiusScale(b.size); 
}); 

// create a holder group for all the graph nodes 
var svgGroup = container.append('g') 
    .attr('transform', 'translate(' + 80 + ',' + 90 + ')'); 


var nodes = tree.nodes(dataTree), 
    links = tree.links(nodes); // and then... ? 

// declare the nodes (this creates placed groups) 
var svgNodes = svgGroup.selectAll('.node') 
    .data(nodes) // cut out the root node, we don't need it : nodes.slice(1) 
.enter().append('g') 
    .attr('class', 'node') 
    .attr('transform', function (d) { 
    return "rotate(" + (d.x - 90) + ") translate(" + d.y + ")"; 
}); 

// append a cirl to all nodes groups 
svgNodes.append('circle').attr('r', function (d) { 
    return d.size; 
});

编辑

进展与此代码所做的。

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

var svgLinks = svgGroup.selectAll('path') 
     .data(tree.links(nodes)) 
     .enter().append('svg:path') 
     .attr('class', 'link') 
     .attr('d', diagonal) 
     .attr("fill", "none") 
     .attr("stroke", "gray");

小提琴更新：http://jsfiddle.net/fLqekg12/4/ 我现在唯一需要的是直线，而不是弯曲的。任何人？

来源

2015-05-18 Romain Bruckert

创建“节点”，然后生成具有节点类元素。您必须对“链接”执行相同的操作：使用源和目标的坐标创建svg：line元素。 – Matthieu

感谢@Matthieu，我意识到这一点，并理解一般原则，但我没有用d3 js编写实际的代码并使其工作（我已经从几个例子中已经尝试过）不够舒适; –

也许你可以直接使用强制布局：https：//github.com/mbostock/d3/wiki/Force-Layout或者看看d3js svg行功能 – Matthieu

计算后并创建节点，你必须创建你的链接，SVG线元素：

var link = svgGroup.selectAll('line.link') 
    .data(links) 
    .enter().append('svg:line') 
     .attr("class", "link") 
     .attr("style","stroke:black") 
     .attr("x1", function(d) { return ... (x coordinate source node) }) 
     .attr("y1", function(d) { return ... (y coordinate source node) }) 
     .attr("x2", function(d) { return ... (x coordinate target node) }) 
     .attr("y2", function(d) { return ... (y coordinate target node) });

您探微必须找到良好的公式来计算位置由X，Y极坐标。

来源

2015-05-18 14:09:29 Matthieu

你知道如何检索源/目标坐标吗？ –

它们存储在d.source（.x/y）和d.target（.x/y） – Matthieu

实际上它不是数据（节点）而是数据（链接）。线条不是用正确的坐标绘制的（请参阅http://jsfiddle.net/fLqekg12/3）。我认为它是因为 - 如果你读了我的代码 - 节点被转换。所以他们的x/y位置仍然是他们的样子，但转换给他们另一个位置。你怎么看？ –

两个工作的解决方案是：

使用路径（最简单的一个，但不能转换成曲线，直线）：http://jsfiddle.net/fLqekg12/4/

使用线。诀窍是线路不能直接用来代替路径（see why here），并且如果转换节点，则不起作用。

我找到了解决办法是found from this post：行必须转换，以及如果您的节点转化：

使用d.target.x/180 * Math.PI)上y1和y2，因为我希望有一个径向凸起，最后用一次改造线路：

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

全在这里工作例如： http://jsfiddle.net/fLqekg12/6/

来源

2015-05-18 16:09:27

添加链接到我的节点与d3.js

回答

相关问题