如何使用D3对角线函数绘制曲线？ [英] How to use the D3 diagonal function to draw curved lines?

问题描述

我查看了示例：

但是，看起来像接近节点的曲线的行为是相反的的需要。我希望他们在节点处水平地开始，并在中间形成一条曲线。

解决方案

这个解决方案是基于优秀的@bmdhacks解决方案，但是，更好，因为它不需要在数据本身内交换x和y。

这个想法是你可以使用 diagonal.source / code>和 diagonal.target（）以交换x和y：

 code> var diagonal = d3.svg.diagonal（）
 .source（function（d）{return {x：d.source.y，y：d.source.x}; }）
 .target（function（d）{return {x：d.target.y，y：d.target.x};}）
 .projection {return [dy，dx];}）; 
  

所有xy交换现在都封装在上述代码中。

结果：

这里还有 jsfiddle 。

I looked at sample http://bl.ocks.org/mbostock/raw/4063570/:

It produces nice merged lines from source target from left to right.

In my case I need to layout nodes manually and put x, y coordinates. In this case the lines are not merged at source nodes. Here is the test code that reproduce this problem:

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);
        links.push({source: d, target: c});
    })
})

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) { return [d.x, d.y]; });

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

There is sample of this at http://jsfiddle.net/zmagdum/qsEbd/:

However, it looks like the behavior of curves close to nodes are opposite of desired. I would like them to start straight horizontally at the nodes and make a curve in the middle. Is there a trick to do this?

解决方案

This solution is based on excellent @bmdhacks solution, however, I believe mine is slightly better, since it doesn't require swapping x and y within data itself.

The idea is that you can use diagonal.source() and diagonal.target() to swap x and y:

var diagonal = d3.svg.diagonal()
    .source(function(d) { return {"x":d.source.y, "y":d.source.x}; })            
    .target(function(d) { return {"x":d.target.y, "y":d.target.x}; })
    .projection(function(d) { return [d.y, d.x]; });

All x y swapping is now encapsulated within the code above.

The result:

Here is also jsfiddle.

这篇关于如何使用D3对角线函数绘制曲线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！