将外部文件添加到d3

时间：2017-01-30 05:35:50

标签： javascript php d3.js

我试图在html中添加php输出d3.for测试目的我尝试使用简单的代码

的index.html 

     <!DOCTYPE html>
  <html>

 <head>
  <title>including php in javascript</title>
  <?
 include ('index.php');
  ?>
   </head>

  <body>
 <script>
  var myJSON = <?php echo json_encode($json); ?>;
   document.write(myJSON);
 </script>
</body>
  </html>

将外部文件添加到d3

的另一种方法 
           <!DOCTYPE html>
         <html>

       <head>
        <title>Radial Cluster Demo</title>
   <script src="ddd.js"></script>

       <style>
         .node {
    cursor: pointer;
        }
   .overlay {
    background-color:white;
         }
       .node circle {
fill: #fff;
stroke: steelblue;
  stroke-width: 1.5px;
          }
       .node text {
 font: sans-serif;

text-align: center;
     }
       .link {
    fill: none;   
       } 
       .parent{
      fill :red;
   font-weight:bolder
       }
      div#tooltip { 
position: absolute;         
  font: 15px sans-serif;        
background: orange; 
  border-radius: 8px;   
    padding-left: 5px;
    padding-right: 5px;
     pointer-events: none;          
     }

     </style>
       </head>

        <body>

    <div id="tooltip" style="display:none"></div>
   <div id="tree-container"class="full"></div>
   <script type="text/javascript">
 d3.json("http://localhost:8888/new/new.json",function(treeData){


   var selectedNode = null;
    var draggingNode = null;

     var panSpeed = 200;
     var panBoundary = 0; 

  var i = 0;
   var duration = 750;
  var root;

  var width = 5000;
  var height = 5000;

  var diameter = 750;

 var tree = d3.layout.tree().size([360, diameter / 2 - 120])

     .separation(function (a, b) {
     return (a.parent == b.parent ? 1 : 5) / a.depth;
         });

     var diagonal = d3.svg.diagonal.radial()

      .projection(function (d) {
      return [d.y, d.x / 180 * Math.PI];
        });

     root = treeData;
     root.x0 = height / 2;
       root.y0 = 0;

    function sortTree() {
tree.sort(function (a, b) {
    return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1;
       });
     }
       sortTree();
     var baseSvg = d3.select("#tree-container").append("svg")
.attr("width", width)
.attr("height", height)
     .attr("class", "overlay")

          .attr("transform", "translate(" + 1000 + "," + 1000 + ")");
    function collapse(d) {

    if (d.children) {
    d._children = d.children;
    d._children.forEach(collapse);
    d.children = null;
       }

   update(d);
      }

 function expand(d) {

if (d._children) {
    d.children = d._children;
    d.children.forEach(expand);
    d._children = null;
     }
      }
    function toggleChildren(d) {

   if (d.children) {
    d._children = d.children;
    d.children = null;
     } else if (d._children) {
    d.children = d._children;
    d._children = null;
      }
    return d;
      }

    function click(d) {
       if(!d.parent){
    return;
        }

      if (!d.children) 
 treeData.children.forEach(collapse);

if (d3.event.defaultPrevented) return; 

d = toggleChildren(d);

    update(d);


      }

   function update(source) {

var levelWidth = [1];
var childCount = function (level, n) {
    if (n.children && n.children.length > 0) {
        if (levelWidth.length <= level + 1) levelWidth.push(0);

        levelWidth[level + 1] += n.children.length;
        n.children.forEach(function (d) {
            childCount(level + 1, d);
        });
    }
      };
        childCount(0, root);
 var nodes = tree.nodes(root); 
links = tree.links(nodes);
node = svgGroup.selectAll("g.node")
    .data(nodes, function (d) {
    return d.id || (d.id = ++i);
       });




var nodeEnter = node.enter().append("g")

    .attr("class", "node")

        .on('click', click)

  nodeEnter.append("circle")
    .attr("class", "smallcircle")
        .style("stroke", function(d) {
  return d.color;
      })


   nodeEnter.append("text")

    .text(function (d) {
    return d.name;
})
 //   .style("font", "12px serif")
    .style("opacity", 1)
    .style("fill-opacity", 0)

     .on("mouseover", function (d) {
        var r = d3.select(this).node().getBoundingClientRect();
       d3.select("div#tooltip")
            .style("display", "inline")
           .style("top", (r.top-25) + "px")
           .style("top", 10 + "px")
        .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 40) + "px") 
          .style("left", r.left + 40+"px")
          .style("left",  + "px")
            .style("position", "absolute")
           .text(d.t);
     })
.on("mouseout", function(){
   d3.select("div#tooltip").style("display", "none")
     })


node.select("circle.nodeCircle")
    .attr("r", 4.5)
    .style("fill", function (d) {
    return d._children ? "red" : "#fff";
});


                        //     });
    var nodeUpdate = node.transition()
    .duration(duration)
    .attr("transform", function (d) {
    return "rotate(" + (d.x - 90) + ")translate
        (" + d.y + ")rotate(" + (-d.x + 90) + ")";
        });

     nodeUpdate.select("circle")
    .attr("r", 4.5)

    .style("fill", function (d) {
    return d._children ? "lightsteelblue" : "#fff";
  });

    nodeUpdate.select("text")
    // .style("font-size", "13px")
    .style("fill-opacity", 2)
      .attr("fill",function(d){return (d.children?"red":"black");})
    .attr("dy", ".35em")

    .attr("text-anchor", function (d) {
    return d.x < 180 ? "start" : "end";
        })


    .attr("transform", function (d) {
    return d.x < 180 ? "translate(8)" : "rotate(360)translate(-8)";
       });

       var nodeExit = node.exit().transition()
    .duration(duration)
    .attr("transform", function (d) {
    return "translate(" + source.x + "," + source.y + ")";
       })
    .remove();

     nodeExit.select("circle")
    .attr("r", 0);

    nodeExit.select("text")
     .style("fill-opacity", 0);


       var link = svgGroup.selectAll("path.link")
    .data(links, function (d) {
    return d.target.id;
       })
    link.style("stroke", function(d) {
  return d.color;
})

link.enter().insert("path", "g")
    .attr("class", "link")
     link.style("stroke", function(d) {
  return d.target.color;
      })
    .attr("d", function (d) {
    var o = {
        x: source.x0,
        y: source.y0
    };
    return diagonal({
        source: o,
        target: o
    });
     });


    link.transition()
    .duration(duration)
    .attr("d", diagonal);


     link.exit().transition()
    .duration(duration)
    .attr("d", function (d) {
    var o = {
        x: source.x,
        y: source.y
    };
    return diagonal({
        source: o,
        target: o
    });
      })
    .remove();


    nodes.forEach(function (d) {
    d.x0 = d.x;
    d.y0 = d.y;
        });
      }

      var svgGroup = baseSvg.append("g")
   .attr("transform", "translate(" + 550 + "," + 300 + ")")


        d3.selectAll("text").style("fill", function (d)
   { return             d3.select(this).classed(d.cond, true); })


      root.children.forEach(function (child) {
        collapse(child);
       });

        update(root);
     d3.select(self.frameElement).style("height", width);
      });
       </script>
      </body>

       </html>

在这个方法中我得到了

     Uncaught TypeError: Cannot read property 'forEach' of undefined

哪里错了？

index.php输出

    [
   {
  "id":"1",
  "name":"parent",
  "parent":"0",
  "children":[
     {
        "id":"2",
        "name":"c1",
        "parent":"1",
        "children":[
           {
              "id":"3",
              "name":"c11",
              "parent":"2",
              "children":[

              ]
           },
           {
              "id":"4",
              "name":"c12",
              "parent":"2",
              "children":[

              ]
           }
        ]
     },
     {
        "id":"5",
        "name":"c2",
        "parent":"1",
        "children":[
           {
              "id":"6",
              "name":"c21",
              "parent":"5",
              "children":[

              ]
           },
           {
              "id":"7",
              "name":"c22",
              "parent":"5",
              "children":[

              ]
           }
        ]
     },
     {
        "id":"8",
        "name":"c3",
        "parent":"1",
        "children":[

        ]
     }
  ]
 }
]

1 个答案:

答案 0 :(得分：0)

尝试添加

header('Content-Type: application/json');

之前

$json= json_encode($nestedArray);
echo $json;

指定您要返回json格式数据

相关问题
最新问题