D3对角线使用坐标而不是对象答案

【问题标题】：D3 diagonal using coordinates instead of objectsD3对角线使用坐标而不是对象
【发布时间】：2013-05-23 03:43:06
【问题描述】：

我正在寻找一种方法来创建一条线，就像使用 d3.svg.diagonal 得到的那样，但不是使用源对象和目标对象，而是使用坐标。我尝试摆弄投影功能，但没有成功。

这是我在对象之间完成的一个小提琴：http://jsfiddle.net/bmdhacks/qsEbd/5/

我的目标的简短版本：

假设我有两点，比如这张图：

我希望能够让他们通过仅提供开始和结束的坐标来执行以下操作：

有什么用，如果有帮助的话：

var data = [ {name: "p1", children: [{name: "c1"}, {name: "c2"}, {name: "c3"}, {name: "c4"}]}];
var width = 400, height = 200, radius = 10, gap = 50;

// test layout
var nodes = [];
var links = [];
data.forEach(function(d, i) {
    d.x = width/4;
    d.y = height/2;
    nodes.push(d);
    d.children.forEach(function(c, i) {
        c.x = 3*width/4;
        c.y = gap * (i +1) -2*radius;
        nodes.push(c);

        var a = {x:c.y, y:c.x};
        var b = {x:d.y, y:d.x};
        links.push({source: b, target: a});
    })
})

var color = d3.scale.category20();

var svg = d3.select("#chart").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g");
var diagonal = d3.svg.diagonal()
        .projection(function(d) { 
            console.log(d);
            return [d.y, d.x]; });

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

var circle = svg.selectAll(".circle")
        .data(nodes)
        .enter()
        .append("g")
        .attr("class", "circle");

var el = circle.append("circle")
        .attr("cx", function(d) {return d.x})
        .attr("cy", function(d) {return d.y})
        .attr("r", radius)
        .style("fill", function(d) {return color(d.name)})
        .append("title").text(function(d) {return d.name});

【问题讨论】：

标签： svg d3.js projection diagonal

【解决方案1】：

好的，所以我从 illustrator 解码了一个 SVG 文件，并找出了实现这一目标的值。这里供其他人参考。这个例子只适用于水平，但我相信你可以找出垂直版本...... :)

d=[{x1:100,y1:100,x2:300,y2:500}, ... ]

var CustomLine = function(d,i){
        var x1 = d.x1;
        var y1 = d.y1;
        var x2 = d.x2;
        var y2 = d.y2;
        var s = Math.abs(x1-x2)*0.70; // strength 
        return "M"+x1+","+y1+" C"+(x1+s)+","+y1+" "+(x2-s)+","+y2+" "+x2+","+y2;
    }

【讨论】：