"TypeError：root.children is undefined" Collapsible Tree d3 v3

Question

私はMike Bostockのcollapsible treeの例をd3 v3で試しています。

TypeError: root_03.children is undefined

私は、トラブルシューティングのためにStack Overflowと呼ばれているが、解決策は機能しません。しかし、私は常に、次のエラーメッセージが表示されます。

これに対する回答はありますか？または、このコードがv3でもう動作しない可能性がありますか？ここで

私のJSコードです：

var w_canvas_03 = 960; 
var h_canvas_03 = 800; 

var margin_03 = { 
    top: 50, 
    right: 20, 
    bottom: 30, 
    left: 20 
}; 

var w_chart_03 = w_canvas_03 - margin_03.left - margin_03.right; 
var h_chart_03 = h_canvas_03 - margin_03.top - margin_03.bottom; 

var i_03 = 0; 
var duration_03 = 750; 
var root_03; 

var tree_03 = d3.layout.tree() 
      .size([h_chart_03, w_chart_03]); 

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

var svg_03 = d3.select("body") 
      .append("svg") 
      .attr("width", w_canvas_03) 
      .attr("height", h_canvas_03) 
      .append("g") 
      .attr("transform", "translate(" + margin_03.left + "," + margin_03.top + ")"); 

d3.json("resource/json_remark.json", function(error_, source_){ 
    if (error_) throw error_; 
    root_03 = source_; 
    root_03.x0 = h_chart_03/2; 
    root_03.y0 = 0; 
    console.log(root_03) 

    function Collapse_03(data_){ 
     if (data_.children){ 
      data_._children = data_.children; 
      data_._children.forEach(Collapse_03); 
      data_.children = null; 
     } 
    } 

    root_03.children.forEach(Collapse_03); 
    Update_03(root_03); 
}) 

d3.select(self.frameElement).style("height", h_canvas_03); 

function Update_03(source_){ 

    // Computing the flattened node list 
    var nodeAll_03 = tree_03.nodes(root_03).reverse() 
    var linkAll_03 = tree_03.links(nodeAll_03); 

    // Normalizing for fixed-depth 
    nodeAll_03.forEach(function(data_){ 
     data_.y = 180 * data_.depth; 
    }); 


    // Updating the node 
    var node_03 = svg_03.selectAll("g.node") 
     .data(nodeAll_03, function(data_){ 
      return data_.id || (data_.id = ++i_03); 
     }); 

    var nodeEnter_03 = node_03.enter() 
     .append("g") 
     .attr("class", "node") 
     .attr("transform", function(data_){ 
      return "translate(" + source_.y0 + "," + source_.x0 + ")"; 
     }) 
     .on("click", Click_03); 

    // Entering any new nodes at the parent's previous position 
    nodeEnter_03.append("circle") 
     .attr("r", 1e-6) 
     .style("fill", function(data_){ 
      data_._children ? "lightsteelblue" : "#fff" 
;  }); 

    nodeEnter_03.append("text") 
     .attr("x", function(data_){ 
      data_.children || data_.children ? -10:10; 
     }) 
     .attr("dy", "0.35em") 
     .attr("text-anchor", function(data_){ 
      return data_.children || data_.children ? "end" : "start"; 
     }) 
     .text(function(data_){ 
      return data_.name; 
     }) 
     .style("fill-opacity", 1e-6); 

    // Transitioning nodes to their new position 
    var nodeUpdate_03 = node_03.transition() 
     .duration(duration_03) 
     .attr("transform", function(data_){ 
      return "translate(" + data_.y + "," + data_.x + ")"; 
     }); 

    nodeUpdate_03.select("circle") 
     .attr("r", 4.5) 
     .style("fill", function(data_){ 
      return data_._children ? "lightsteelblue" : "#fff;" 
     }); 

    nodeUpdate_03.select("text") 
     .style("fill-opacity", 1); 

    // Transitioning exiting nodes to the parent's new position 
    var nodeExit_03 = node_03.exit() 
     .transition() 
     .duration(duration_03) 
     .attr("transform", function(data_){ 
      return "translate(" + source_.y + "," + source_.x + ")"; 
     }) 
     .remove(); 

    nodeExit_03.select("circle") 
     .attr("r", 1e-6); 

    nodeExit_03.select("text") 
     .style("fill-opacity", 1e-6); 

    // Updating the links 
    var link_03 = svg_03.selectAll("path.link") 
     .data(linkAll_03, function(data_){ 
      return data_.target.id; 
     }); 

    // Entering any new links at the parent's previous position 
    link_03.enter() 
     .insert("path", "g") 
     .attr("class", "link") 
     .attr("d", function(data_){ 
      var o_03 = {x: source_.x0, y: source_.y0}; 
      return diagonal_03({source: o_03, target: o_03}); 
     }); 

    // Transitioning links to their new position 
    link_03.transition() 
     .duration(duration_03) 
     .attr("d", diagonal_03); 

    // Transitioning exiting nodes to the parent's new position 
    link_03.exit() 
     .transition() 
     .duration(duration_03) 
     .attr("d", function(data_){ 
      var o_03 = {x: source_.x, y: source_.y}; 
      return diagonal_03({source: o_03, target: o_03}); 
     }) 
     .remove(); 

    // Stashing the old positions for transition 
    nodeAll_03.forEach(function(data_){ 
     data_.x0 = data_.x; 
     data_.y0 = data_.y; 
    }); 

} 

// Toggling children on click 
function Click_03(data_){ 
    if (data_.children){ 
     data_._children = data_.children; 
     data_.children = null; 
    } else{ 
     data_.children = data_._children; 
     data_._children = null; 
    } 
    Update_03(data_) 
} 

そしてここでは、私のJSONファイルの簡易版：

[ 
    { 
    "name": "Neutral", 
    "children": [ 
     { 
     "name": "Fruit", 
     "children": [ 
      { 
      "name": "Apple" 
      }, 
      { 
      "name": "Orange" 
      } 
     ] 
     } 
    ] 
    } 
] 

Answer 1

あなたは、元のボストックのbl.ocksを見ればあなたがいることが表示されますそのJSON（"flare.json"）ファイルのオブジェクトはであり、配列ではありません。ただし、JSONファイルのの配列はです（その中にオブジェクトが1つあります）。

したがって、解決策は単純である：

root_03 = source_[0]; 
//1st element-----^ 

このGETはchildren性のルートオブジェクトである配列の最初の要素です。

ここにあなたのコードとbl.ocksです：https://bl.ocks.org/anonymous/ae2bcac26194865317d0ec6b55361221/070902f5daaf9d90f061455d11d04769439a8b4c