Question

我正在尝试使用d3 v3的Mike Bostock的collapsible tree示例之一。但是，我总是收到以下错误：

TypeError：root_03.children未定义

我已提及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

如果你看看原始的Bostock的bl.ocks，你会发现它的JSON（<ul> <li><a href="#">Home</a></li> <li><a href="#">Current Projects</a></li> <li><a href="#">What We Do</a></li> <li><a href="#">Call</a></li> </ul>）文件有一个对象，而不是一个数组。但是，您的JSON文件有一个数组（其中包含一个对象）。

因此，解决方案很简单：

"flare.json"

这个get是该数组的第一个元素，它是具有root_03 = source_[0]; //1st element-----^属性的根对象。

这是一个包含代码的bl.ocks：https://bl.ocks.org/anonymous/ae2bcac26194865317d0ec6b55361221/070902f5daaf9d90f061455d11d04769439a8b4c

＆＃34; TypeError：root.children未定义＆＃34;在可折叠树d3 v3上

1 个答案: