如何获得这个d3树图在本地工作？ [英] How can I get this d3 tree chart to work locally?

问题描述

我正试图学习使用d3并做出类似于这个可折叠树的东西：
http://bl.ocks.org/mbostock/4339083

我可以做什么使这张互动树形图在本地工作？

我已从网络中将以下文件保存在同一目录中：

  d3_graph /tree_files/tree.html 
 d3_graph / tree_files / d3.js 
 d3_graph / tree_files / d3.layout.js 
 d3_graph / tree_files / flare.json 
 d3_graph / tree_files / style .css 
  

这产生了图形，但它看起来像chrome保存了一个已经绘制的JavaScript

在web上查看工作版本的源代码后，我看到代码是不同，所以我把它粘贴到tree.html中，并将文件更改为指向d3.js，d3.layout.js，style.css和flare.json的正确位置

这仍然产生一个空白的白页，我不知道还有什么要做。

这是我编辑过的tree.html版本：

 <！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> 
< link type =text / css =stylesheethref =style.css> 
< script type =text / javascriptsrc =d3.js>< / script> 
< script type =text / javascriptsrc =d3.layout.js>< / script> 
< style type =text / css> 
 
 
 .node circle {
 cursor：pointer; 
 fill：#fff; 
 stroke：steelblue; 
 stroke-width：1.5px; 
} 
 
 .node text {
 font-size：11px; 
} 
 
 path.link {
 fill：none; 
 stroke：#ccc; 
 stroke-width：1.5px; 
} 
 
< / style> 
< script> 
 
 var margin = {top：20，right：120，bottom：20，left：120}，
 width = 960  -  margin.right  -  margin.left，
 height = 800  -  margin.top  -  margin.bottom; 
 
 var i = 0，
 duration = 750，
 root; 
 
 var tree = d3.layout.tree（）
 .size（[height，width]）; 
 
 var diagonal = d3.svg.diagonal（）
 .projection（function（d）{return [d.y，d.x];}）; 
 
 var svg = d3.select（body）append（svg）
 .attr（width，width + margin.right + margin.left）
 .attr（height，height + margin.top + margin.bottom）
 .append（g）
 .attr（transform，translate（+ margin.left + ，+ margin.top +））; 
 
 d3.json（flare.json，function（error，flare）{
 root = flare; 
 root.x0 = height / 2; 
 root .y0 = 0; 
 
函数collapse（d）{
 if（d.children）{
 d._children = d.children; 
 d._children。 for $（$）
 
 
 
 root.children.forEach（collapse）; 
 d.children = null; 
} ; 
}）; 
 
 d3.select（self.frameElement）.style（height，800px）; 
 
函数更新（源）{
 
 //计算新的树布局。 
 var nodes = tree.nodes（root）.reverse（），
 links = tree.links（nodes）; 
 
 //规范化固定深度。 
 nodes.forEach（function（d）{d.y = d.depth * 180;}）; 
 
 //更新节点... 
 var node = svg.selectAll（g.node）
 .data（nodes，function（d）{return d.id | |（d.id = ++ i）;}）; 
 
 //在父级的上一个位置输入任何新节点。 
 var nodeEnter = node.enter（）。append（g）
 .attr（class，node）
 .attr returntranslate（+ source.y0 +，+ source.x0 +）;}）
 .on（click，click）; 
 
 nodeEnter.append（circle）
 .attr（r，1e-6）
 .style（fill，function（d）{return d。 _children？lightsteelblue：#fff;}）; 
 
 nodeEnter.append（text）
 .attr（x，function（d）{return d.children || d._children？-10：10;}）
 .attr（dy，.35em）
 .attr（text-anchor，function（d）{return d.children || d._children？end：start ;}）
 .text（function（d）{return d.name;}）
 .style（fill-opacity，1e-6）; 
 
 //将节点转换到新位置。 
 var nodeUpdate = node.transition（）
 .duration（duration）
 .attr（transform，function（d）{returntranslate（+ dy +，+ dx +）;}）; 
 
 nodeUpdate.select（circle）
 .attr（r，4.5）
 .style（fill，function（d）{return d._children？ lightsteelblue：#fff;}）; 
 
 nodeUpdate.select（text）
 .style（fill-opacity，1）; 
 
 //将退出节点的节点转换到父节点的新位置。 
 var nodeExit = node.exit（）。transition（）
 .duration（duration）
 .attr（transform，function（d）{returntranslate +，+ source.x +）;}）
 .remove（）; 
 
 nodeExit.select（circle）
 .attr（r，1e-6）; 
 
 nodeExit.select（text）
 .style（fill-opacity，1e-6）; 
 
 //更新链接... 
 var link = svg.selectAll（path.link）
 .data（links，function（d）{return d.target。 ID; }）; 
 
 //在父级的上一个位置输入任何新的链接。 
 link.enter（）。insert（path，g）
 .attr（class，link）
 .attr（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; 
}）; 
} 
 
 //点击切换子项。 
 function click（d）{
 if（d.children）{
 d._children = d.children; 
 d.children = null; 
} else {
 d.children = d._children; 
 d._children = null; 
} 
 update（d）; 
} 
 
< / script> 
 
 
 
< / body>< / html> 
 

编辑：
我刚刚在chrome中检查控制台，发现这个错误：

  XMLHttpRequest无法加载文件：///home/user/Downloads/d3_graph/tree_files/flare.json。只有HTTP支持跨源请求。 
  

这可能是因为我无法在本地运行，需要通过Web访问tree.html服务器？

解决方案

其他答案工作，但有一个替代方法，如果你不想激活Web服务器： / p>



• Firefox应默认打开您的文件并加载本地json， >
  

• 您可以使用标志 - allow-file-access-from-files 启动Chrome，并且将加载JSON。

I am trying to learn to work with d3 and make something similar to this collapsible tree: http://bl.ocks.org/mbostock/4339083

What can I do to make this interactive tree chart work locally?

I have saved the following files from the web all in the same directory:

   d3_graph/tree_files/tree.html
   d3_graph/tree_files/d3.js
   d3_graph/tree_files/d3.layout.js
   d3_graph/tree_files/flare.json
   d3_graph/tree_files/style.css

This produced the graph, but it looks like chrome saved an already drawn SVG created by the javascript in tree.html, and the tree is not interactive like in the link above.

After looking at the source of the working version on the web, I saw the code was different, so I pasted that in to tree.html and changed the file to point at the correct locations of d3.js, d3.layout.js, style.css and flare.json

This still produced a blank white page and I'm not sure what else to do. How can I make this work?

Here is my edited version of tree.html:

<!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>
    <link type="text/css" rel="stylesheet" href="style.css">
    <script type="text/javascript" src="d3.js"></script>
    <script type="text/javascript" src="d3.layout.js"></script>
    <style type="text/css">


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

.node text {
  font-size: 11px;
}

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

    </style>
<script>

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

var i = 0,
    duration = 750,
    root;

var tree = d3.layout.tree()
    .size([height, width]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("flare.json", function(error, flare) {
  root = flare;
  root.x0 = height / 2;
  root.y0 = 0;

  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(self.frameElement).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.y0 + "," + source.x0 + ")"; })
      .on("click", click);

  nodeEnter.append("circle")
      .attr("r", 1e-6)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

  nodeEnter.append("text")
      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.name; })
      .style("fill-opacity", 1e-6);

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

  nodeUpdate.select("circle")
      .attr("r", 4.5)
      .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.y + "," + source.x + ")"; })
      .remove();

  nodeExit.select("circle")
      .attr("r", 1e-6);

  nodeExit.select("text")
      .style("fill-opacity", 1e-6);

  // 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("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);
}

</script>



</body></html>

EDIT: I just checked the console in chrome to find this error:

XMLHttpRequest cannot load file:///home/user/Downloads/d3_graph/tree_files/flare.json. Cross origin requests are only supported for HTTP. 

Could it be that I can't run this locally and need to access tree.html through a web server?

解决方案

the other answers work, but there is an alternative if you don't want to fire a web server:

• Firefox should open your file and load the local json by default, so nothing to do there.

• you can launch Chrome with the flag --allow-file-access-from-files, and the JSON will be loaded.

这篇关于如何获得这个d3树图在本地工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！