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' と 'depth' が子に対して形成されていないため、ツリー レイアウトが機能せず、次のエラーが発生します。

4

0 に答える 0