可折叠树 d3 v3 上的"TypeError: root.children is undefined"

Question

我正在尝试使用D3 V3的Mike Bostock的可折叠树示例之一。但是，我总是会收到以下错误：

typeerror：root_03.Children是未定义的

我提到了用于故障排除的堆栈溢出，但解决方案不起作用。

有人对此有答案吗？还是因为此代码不再在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

如果您查看原始的bostock的bl.ock，您会看到其JSON（"flare.json"）文件具有对象，而不是数组。但是，您的JSON文件具有数组（其中有一个对象）。

因此，解决方案很简单：

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

这是该数组的第一个元素，它是带有children属性的根对象。

这是一个带有您的代码的bl.ocks：https：//bl.ocks.org/anonymous/ae2bcac26194865317d0ec6b55361221/07090902f5daaf5daaf9d9060614555555d11d11d11d11d04769469439a8b4b4c