Using a variable instead of an external file for d3 script

Question

Am really way out of my comfort zone here - trying to get a representation of a tree using Mike Bostocks collapsible tree. (original on http://bl.ocks.org/mbostock/4339083).

I have the code working, and referencing to my own json data file works, but I need the data in a variable instead of an external file. (due to limitations of the platform I'm using the visualisation on).

The following code calls a file called Objecttree.json, and I want to replace this with a similarly named variable called Objecttree.

It must be deadsimple, but I've searched the existing answers and am not able to use the answers given in my code. I guess skills are even below the lowest noob-threshold, so please keep that in mind!

anyway, thanks in advance.

<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>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = 3000 - margin.right - margin.left,
    height = 1000 - 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("Objecttree.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>

just remove the call to d3.json, move the callback body to the main code and replace root = flare by root = Objecttree.. — Paulo Scardine
– Paulo Scardine, Commented Jan 27, 2015 at 15:31
See stackoverflow.com/questions/22517967/… or stackoverflow.com/questions/21639305/… or stackoverflow.com/questions/15764698/… or ... — Lars Kotthoff
– Lars Kotthoff, Commented Jan 27, 2015 at 15:32
Thanks @PauloScardine, I think I almost have that working. The callback body, is that everything from "root = flare" up to and including " update(root);"? - if so I am missing something because that doesn;t seem to work yet. Have I mentioned i'm in way over my head wioth this code? Thanks for all your patience anyway.. — Sven
– Sven, Commented Jan 28, 2015 at 10:18
Thanks @LarsKotthoff, I actually found all those, but I'm not able to trabnslate that to my code, I'm probably missing something small and semantic. — Sven
– Sven, Commented Jan 28, 2015 at 10:20

kwoxer · Accepted Answer · 2015-01-28 07:42:51Z

0

Try this one:

var Objecttree = '{"type":"Topology","transform":{"scale":[0.06690766172651032,0.060532461291637356],"translate":[-7.240804475075604,51.182450466981884]},"objects":{"outerLine":{"type":"GeometryCollection","geometries":[{"type":"LineString","arcs":[0,1]},{"type":"LineString","arcs":[2,1]}]}},"arcs":[[[0,269],[41,82]],[[41,351],[115,70],[68,10],[35,3],[26,1],[11,-4]],[[295,429],[99,-39],[59,-48],[8,-82],[-34,-91],[-39,-84],[-63,-74],[-54,-11],[-54,12],[-41,8],[-103,82],[-56,66],[-10,114],[34,69]]]}';
var parsedObjecttree = JSON.parse(Objecttree);

For sure this is a json from myself. Replace the json with your data.

answered Jan 28, 2015 at 7:42

kwoxer

3,8615 gold badges45 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JL Peyret Over a year ago

wouldn't you get the same results from removing the surrounding quotes? i.e. var Objecttree = { "type":"Topology",....} and then using that rather than the parsedObjectree? Assuming, of course, that you TRUST what's in the variable. If you have the slightest doubt, use JSON.parse as suggested.

kwoxer Over a year ago

Well that is right for most of the cases sure. But sometimes the json object can contains some signs that harms the code. So this is much safer to use a special function to make sure it always works. I don't know which sign it was, but I had a really really big json file and used it without JSON.parse and it did not work.

Collectives™ on Stack Overflow

Using a variable instead of an external file for d3 script

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related