0

我无法使用以下数据形成树形布局。你认为我做错了什么？尝试了许多选项都不起作用...感谢您的帮助..

var margin = {top: 40, right: 40, bottom: 40, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

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

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

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


var dataD;
d3.csv("./Data/Data.csv", function(csv) {
    var nodesByName = {};
    dataD = d3.nest()
                .key(function(d) { return "main" })
                .key(function(d) { return d.source })
                .key(function(d) { return d.target })
                .rollup(function(leaves) { return leaves.length; })
                .entries(csv);

    var nodes = tree.nodes(dataD[0]);
    console.log(nodes)

    // Create the link lines.
    svg.selectAll(".link")
      .data(csv)
        .enter().append("path")
        .attr("class", "link")
        .attr("d", diagonal);

});

----代码结束------------

///Data.csv --looks like this
source,target
Merged Market,Individual
Merged Market,Sub Connector
Merged Market,Group of 1
Merged Market,Group 2-50
Commercial Insured Market,51 to 499
Commercial Insured Market,500+
Commercial Insured Market,Students
Commercial Self Insured Market,Self Insured
Commercial Self Insured Market,Host
Government Programs,Senior
Government Programs,FEP
Government Programs,MSP
Municipal and Labor Market,Municipal
Municipal and Labor Market,Labor
Ancillary Products,Ancillary
Ancillary Products,Dental
Ancillary Products,Medicare Part D
Ancillary Products,Stand Alone RX
Ancillary Products,Stand Alone Mental Health
Ancillary Products,Stand Alone Vision
Ancillary Products,FEP Dental
Sales Admin,Sales Admin

控制台给出了节点的输出

[Object]
  0: Object
  depth: 0
  key: "main"
  values: Array[7]
  x: 210
  y: 0
  __proto__: Object
  length: 1
__proto__: Array[0]

----------------------- 注意上面出现的“x”和“y”值。但这对孩子来说是没有的——

[Object]
0: Object
  depth: 0
  key: "main"
  values: Array[7]
  0: Object
     key: "Merged Market"
     values: Array[4]
     0: Object
         key: "Individual"
         values: 1
      __proto__: Object
     1: Object
         key: "Sub Connector"
         values: 1
      __proto__: Object
     2: Object
         key: "Group of 1"
         values: 1
      __proto__: Object
     3: Object
         key: "Group 2-50"
         values: 1
      __proto__: Object
  length: 4
  __proto__: Array[0]
  __proto__: Object
  1: Object
  2: Object
  3: Object
  4: Object
  5: Object
  6: Object
length: 7
__proto__: Array[0]
x: 210
y: 0
__proto__: Object
length: 1
__proto__: Array[0]

------ 因为没有为孩子们形成“x”和“y”和“深度”，所以树布局不起作用并给出以下错误

4

0 回答 0