Question

我在项目中添加了一个d3.js库，我还有其他几个库，比如jQuery，kendo ui，jQuery ui等。

但是在点击树视图的节点时崩溃不起作用。它在js小提琴中工作但不在我的应用程序中。是否有任何冲突？

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
 cursor: pointer;
}

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

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

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

 </style>
 <body>
 <div id="lineageTrack"></div>
 <script src="d3.js"></script>
 <script>

   var margin = {
          top: 20,
          right: 120,
          bottom: 20,
          left: 120
      },
      width = 960 - margin.right - margin.left,
      height = 800 - margin.top - margin.bottom;

      var root = {
          "name": "flare",
              "children": [{
              "name": "analytics"
              }, {
                  "name": "graph"
              }]

              };

      var i = 0,
          duration = 750,
          rectW = 60,
          rectH = 30;

      var tree = d3.layout.tree().nodeSize([70, 40]);
      var diagonal = d3.svg.diagonal()
          .projection(function (d) {
          return [d.x + rectW / 2, d.y + rectH / 2];
      });

      var svg = d3.select("#lineageTrack").append("svg").attr("width", 1000).attr("height", 1000)
          .call(zm = d3.behavior.zoom().scaleExtent([1,3]).on("zoom", redraw)).append("g")
          .attr("transform", "translate(" + 350 + "," + 20 + ")");

      //necessary so that zoom knows where to zoom and unzoom from
      zm.translate([350, 20]);

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

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

      root.children.forEach(collapse);
      update(root);

      d3.select("#lineageTrack").style("height", "800px");

      function update(source) {

          // Compute the new tree layout.
          var nodes = tree.nodes(root).reverse(),
              links = tree.links(nodes);

          // Normalize for fixed-depth.
          nodes.forEach(function (d) {
              d.y = d.depth * 180;
          });

          // Update the nodes…
          var node = svg.selectAll("g.node")
              .data(nodes, function (d) {
              return d.id || (d.id = ++i);
          });

          // Enter any new nodes at the parent's previous position.
          var nodeEnter = node.enter().append("g")
              .attr("class", "node")
              .attr("transform", function (d) {
              return "translate(" + source.x0 + "," + source.y0 + ")";
          })
              .on("click", click);

          nodeEnter.append("rect")
              .attr("width", rectW)
              .attr("height", rectH)
              .attr("stroke", "black")
              .attr("stroke-width", 1)
              .style("fill", function (d) {
              return d._children ? "lightsteelblue" : "#fff";
          });

          nodeEnter.append("text")
              .attr("x", rectW / 2)
              .attr("y", rectH / 2)
              .attr("dy", ".35em")
              .attr("text-anchor", "middle")
              .text(function (d) {
              return d.name;
          });

          // Transition nodes to their new position.
          var nodeUpdate = node.transition()
              .duration(duration)
              .attr("transform", function (d) {
              return "translate(" + d.x + "," + d.y + ")";
          });

          nodeUpdate.select("rect")
              .attr("width", rectW)
              .attr("height", rectH)
              .attr("stroke", "black")
              .attr("stroke-width", 1)
              .style("fill", function (d) {
              return d._children ? "lightsteelblue" : "#fff";
          });

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

          // Transition exiting nodes to the parent's new position.
          var nodeExit = node.exit().transition()
              .duration(duration)
              .attr("transform", function (d) {
              return "translate(" + source.x + "," + source.y + ")";
          })
              .remove();

          nodeExit.select("rect")
              .attr("width", rectW)
              .attr("height", rectH)
          //.attr("width", bbox.getBBox().width)""
          //.attr("height", bbox.getBBox().height)
          .attr("stroke", "black")
              .attr("stroke-width", 1);

          nodeExit.select("text");

          // Update the links…
          var link = svg.selectAll("path.link")
              .data(links, function (d) {
              return d.target.id;
          });

          // Enter any new links at the parent's previous position.
          link.enter().insert("path", "g")
              .attr("class", "link")
              .attr("x", rectW / 2)
              .attr("y", rectH / 2)
              .attr("d", function (d) {
              var o = {
                  x: source.x0,
                  y: source.y0
              };
              return diagonal({
                  source: o,
                  target: o
              });
          });

          // Transition links to their new position.
          link.transition()
              .duration(duration)
              .attr("d", diagonal);

          // Transition exiting nodes to the parent's new position.
          link.exit().transition()
              .duration(duration)
              .attr("d", function (d) {
              var o = {
                  x: source.x,
                  y: source.y
              };
              return diagonal({
                  source: o,
                  target: o
              });
          })
              .remove();

          // Stash the old positions for transition.
          nodes.forEach(function (d) {
              d.x0 = d.x;
              d.y0 = d.y;
          });
      }

      // Toggle children on click.
      function click(d) {
          if (d.children) {
              d._children = d.children;
              d.children = null;
          } else {
              d.children = d._children;
              d._children = null;
          }
          update(d);
      }

      //Redraw for zoom
      function redraw() {
        //console.log("here", d3.event.translate, d3.event.scale);
        svg.attr("transform",
            "translate(" + d3.event.translate + ")"
            + " scale(" + d3.event.scale + ")");
      }

     </script>
      </body>
      </html>

see the elements

Answer 1

您的文件可能与jquery.min.js或其他图书馆发生冲突，因此可能存在冲突。因此，您需要将d3.js文件保留在所有库文件的上方。它会正常工作。

D3.js树视图崩溃在我的应用程序中无效

1 个答案: