javascript - D3V4 - 无法让 d3.tree 在 CodeSnippet 中工作

Question

该代码在我的浏览器中运行良好，取自 https://bl.ocks.org/d3noob/b024fcce8b4b9264011a1c3e7c7d70dc

但是，当我尝试在 StackOverflow 中创建 CodeSnippet 时，出现以下错误(如下)。我使用的是 D3.4.9.1，如何修复代码才能使其作为 CodeSnippet 运行而不会出现错误？一旦我可以让代码片段工作，我就可以发布我的实际问题;)

    var treeData =
    {
      "value": "+",
      "children": [
        {
          "value": "/",
          "children": [
            { "value": "4" },
            { 
              "value": "7",
            }
          ]              
        },
        { 
          "value": "/",
          "children": [
            { "value": "2" },
            { 
              "value": "7",
            }
          ]   
        }
      ]
    };
    // set the dimensions and margins of the diagram
    var margin = {top: 40, right: 40, bottom: 40, left: 40},
    width = 600 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;
    // declares a tree layout and assigns the size
    var treemap = d3.tree()
    .size([width, height]);
    //  assigns the data to a hierarchy using parent-child relationships
    var nodes = d3.hierarchy(treeData);
    // maps the node data to the tree layout
    nodes = treemap(nodes);
    // append the svg obgect to the body of the page
    // appends a 'group' element to 'svg'
    // moves the 'group' element to the top left margin
    var svg = d3.select(".xTree").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom),
    g = svg.append("g")
    .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");
    // adds the links between the nodes
    var link = g.selectAll(".bbTreeLink")
    .data( nodes.descendants().slice(1))
    .enter().append("path")
    .attr("class", "bbTreeLink")
    .attr("d", function(d) {
      return "M" + d.x + "," + d.y
      + "C" + d.x + "," + (d.y + d.parent.y) / 2
      + " " + d.parent.x + "," +  (d.y + d.parent.y) / 2
      + " " + d.parent.x + "," + d.parent.y;
    });
    // adds each node as a group
    var node = g.selectAll(".bbTreeNode")
    .data(nodes.descendants())
    .enter().append("g")
    .attr("class", function(d) {
      return "bbTreeNode" +
      (d.children ? " bbTreeNode--internal" : " bbTreeNode--leaf"); })
    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")"; });
      // adds the circle to the node
      node.append("circle")
      .attr("r", 26);
      // adds the text to the node
      node.append("text")
      .attr("dy", ".35em")
      .attr('class', 'bbTreeText')
      //- .attr("y", function(d) { return d.children ? -20 : 20; })
      .style("text-anchor", "middle")      
      .text(function(d) { return d.data.value; });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.min.js"></script>

{
  "message": "Uncaught TypeError: d3.tree is not a function",
  "filename": "https://stacksnippets.net/js",
  "lineno": 43,
  "colno": 22
}

Answer 1

看来您无意中使用了 D3 版本 3.4.9在你的<script> 。使用 v4 代替:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.2/d3.min.js"></script>

示例:

    
.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 3px;
}

.node text { font: 12px sans-serif; }

.node--internal text {
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.2/d3.min.js"></script>

<script>

var treeData =
  {
    "name": "Top Level",
    "children": [
      { 
		"name": "Level 2: A",
        "children": [
          { "name": "Son of A" },
          { "name": "Daughter of A" }
        ]
      },
      { "name": "Level 2: B" }
    ]
  };

// set the dimensions and margins of the diagram
var margin = {top: 40, right: 90, bottom: 50, left: 90},
    width = 660 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// declares a tree layout and assigns the size
var treemap = d3.tree()
    .size([width, height]);

//  assigns the data to a hierarchy using parent-child relationships
var nodes = d3.hierarchy(treeData);

// maps the node data to the tree layout
nodes = treemap(nodes);

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom),
    g = svg.append("g")
      .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");

// adds the links between the nodes
var link = g.selectAll(".link")
    .data( nodes.descendants().slice(1))
  .enter().append("path")
    .attr("class", "link")
    .attr("d", function(d) {
       return "M" + d.x + "," + d.y
         + "C" + d.x + "," + (d.y + d.parent.y) / 2
         + " " + d.parent.x + "," +  (d.y + d.parent.y) / 2
         + " " + d.parent.x + "," + d.parent.y;
       });

// adds each node as a group
var node = g.selectAll(".node")
    .data(nodes.descendants())
  .enter().append("g")
    .attr("class", function(d) { 
      return "node" + 
        (d.children ? " node--internal" : " node--leaf"); })
    .attr("transform", function(d) { 
      return "translate(" + d.x + "," + d.y + ")"; });

// adds the circle to the node
node.append("circle")
  .attr("r", 10);

// adds the text to the node
node.append("text")
  .attr("dy", ".35em")
  .attr("y", function(d) { return d.children ? -20 : 20; })
  .style("text-anchor", "middle")
  .text(function(d) { return d.data.name; });
    
</script>