Question

这是我的起点示例：

＆＃13;

var diameter = 650;

var color = d3.scale.linear()
    .domain([0,0.5,1])
    .range(["green","orange","yellow","red"])
    //.range(["rgb(122,184,0)","yellow","rgb(207,0,114)"])
    //.range(["rgb(122,184,0)","rgb(207,0,114)"])
    //.range(["green","red"])
    .range(["green","yellow","red"])

var tree = d3.layout.tree()
    .size([360, diameter / 2 - 100])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

var diagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

var svg = d3.select("body").append("svg")
    .attr("width", diameter )
    .attr("height", diameter + 200)
    .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

d3.json("https://gist.githubusercontent.com/mbostock/1093025/raw/490fffd1ae637d3275aa9eaa8b0487147717dd40/flare.json", function(error, root) {


  if (error) throw error;

  var nodes = tree.nodes(root),
      links = tree.links(nodes);

  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("rect")
        .attr("width", function(d){
            if (d.depth < 4)
                {return 0}
            else 
                {return 500}
        })
        .attr("height",function(d){
            if (d.depth < 4)
                {return 0}
            else 
                {return 20}
        }) 
        .attr("opacity", 0.5)
        .style("fill", function(d) { return color(d.size); });

     node.append("text")
        .attr("dy", "-.30em")
        .attr("text-anchor", function(d) {
            if (d.depth == 0)
                {return d.x < 0 ? "middle" : "middle"; }
            else
                {return d.x < 180 ? "start" : "end"; }})

        .attr("transform", function(d) { 
            if (d.depth == 0)
                {return d.x < 0 ? "translate(0)" : "rotate(271)translate(0)"}
            else
                if(d.depth == 1)
                    //translate the play names outwards needs formula
                    {return d.x < 180 ? "translate(-8)" : "rotate(180)translate(-8)"}
                else
                    {return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"}
        ;})
        .style("font-size",function(d){
            if (d.depth == 0)
                {return "350px"}
            else {
                if(d.depth == 1)
                    {return "80px"}
                else{
                    if(d.depth == 2)
                        {return "10px"}
                    else{
                        if(d.depth == 3)
                            {return "10px"}
                        else{
                            return "10px"}}}}

      })
        .style("font-weight", function(d){
            if(d.depth == 0){
                return "normal"}})
        .text(function(d) {
            if(d.depth < 4)
                {return d.skill}
            else
                {return d.name}});
*/
});

d3.select(self.frameElement).style("height", diameter - 150 + "px");

＆＃13;

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.0px;
}

.node {
          font-family: 'Ariel', sans-serif;
          color: #F4781E;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.12/d3.min.js"></script>
<!DOCTYPE html>
<meta charset="utf-8">

＆＃13;

代码段的输出是：

我现在有兴趣将这个Tilford树变成椭圆形。我的猜测是树大小需要一个定义椭圆的函数。但是，我似乎无法弄清楚如何做到这一点。有什么建议吗？

Answer 1

添加行：

 .attr("transform", function(d) { return "scale(1.4 0.7)"; });

到绑定曲线链接到数据的代码，你可以实现这个：

这可以在这个片段中看到：

＆＃13;

var diameter = 650;

var color = d3.scale.linear()
    .domain([0,0.5,1])
    .range(["green","orange","yellow","red"])
    //.range(["rgb(122,184,0)","yellow","rgb(207,0,114)"])
    //.range(["rgb(122,184,0)","rgb(207,0,114)"])
    //.range(["green","red"])
    .range(["green","yellow","red"])

var tree = d3.layout.tree()
    .size([360, diameter / 2 - 100])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

var diagonal = d3.svg.diagonal.radial()
    .source(function(d) { return {"x":d.source.x, "y":d.source.y}; })            
    .target(function(d) { return {"x":d.target.x, "y":d.target.y}; })
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

var svg = d3.select("body").append("svg")
    .attr("width", diameter )
    .attr("height", diameter + 200)
    .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

d3.json("https://gist.githubusercontent.com/mbostock/1093025/raw/490fffd1ae637d3275aa9eaa8b0487147717dd40/flare.json", function(error, root) {


  if (error) throw error;

  var nodes = tree.nodes(root),
      links = tree.links(nodes);

  var link = svg.selectAll(".link")
        .data(links)
        .enter().append("path")
        .attr("class", "link")
        .attr("d", diagonal)
        .attr("transform", function(d) { return "scale(1.4 0.7)"; });

/*
  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("rect")
        .attr("width", function(d){
            if (d.depth < 4)
                {return 0}
            else 
                {return 500}
        })
        .attr("height",function(d){
            if (d.depth < 4)
                {return 0}
            else 
                {return 20}
        }) 
        .attr("opacity", 0.5)
        .style("fill", function(d) { return color(d.size); });

     node.append("text")
        .attr("dy", "-.30em")
        .attr("text-anchor", function(d) {
            if (d.depth == 0)
                {return d.x < 0 ? "middle" : "middle"; }
            else
                {return d.x < 180 ? "start" : "end"; }})

        .attr("transform", function(d) { 
            if (d.depth == 0)
                {return d.x < 0 ? "translate(0)" : "rotate(271)translate(0)"}
            else
                if(d.depth == 1)
                    //translate the play names outwards needs formula
                    {return d.x < 180 ? "translate(-8)" : "rotate(180)translate(-8)"}
                else
                    {return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"}
        ;})
        .style("font-size",function(d){
            if (d.depth == 0)
                {return "350px"}
            else {
                if(d.depth == 1)
                    {return "80px"}
                else{
                    if(d.depth == 2)
                        {return "10px"}
                    else{
                        if(d.depth == 3)
                            {return "10px"}
                        else{
                            return "10px"}}}}

      })
        .style("font-weight", function(d){
            if(d.depth == 0){
                return "normal"}})
        .text(function(d) {
            if(d.depth < 4)
                {return d.skill}
            else
                {return d.name}});
*/
});

d3.select(self.frameElement).style("height", diameter - 150 + "px");

＆＃13;

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.0px;
}

.node {
          font-family: 'Ariel', sans-serif;
          color: #F4781E;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.12/d3.min.js"></script>
<!DOCTYPE html>
<meta charset="utf-8">

＆＃13;

如何在D3.js中生成椭圆Tilford树

1 个答案: