Databases
StackOverflow2013
Postsdbo
POD3 tree graph with links
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POD3 tree graph with links
    primarykey
    data
    text
    <p>I'm new to the <strong>d3.js</strong> library.</p> <p>I'm trying to make a tree like <a href="http://mbostock.github.io/d3/talk/20111018/tree.html" rel="nofollow">this one</a>, but with a link that goes to an external page on each node.</p> <p>Is it possible? </p> <p>I tried to add a "svg:a" to each node but in makes all the tree to disappear.</p> <p>Update:</p> <p>I'm taking this code from the html of the page linked above.</p> <p>The libraries linked are:</p> <ul> <li>d3.js</li> <li>d3.layout.js</li> </ul> <p>This is all the code:</p> <pre><code>&lt;style type="text/css"&gt; .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; } &lt;/style&gt; &lt;script&gt; var m = [20, 120, 20, 120], w = 1280 - m[1] - m[3], h = 800 - m[0] - m[2], i = 0, root; var tree = d3.layout.tree() .size([h, w]); var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.y, d.x]; }); var vis = d3.select("#body").append("svg:svg") .attr("width", w + m[1] + m[3]) .attr("height", h + m[0] + m[2]) .append("svg:g") .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); d3.json("flare.json", function(json) { root = json; root.x0 = h / 2; root.y0 = 0; function toggleAll(d) { if (d.children) { d.children.forEach(toggleAll); toggle(d); } } // Initialize the display to show a few nodes. root.children.forEach(toggleAll); toggle(root.children[1]); toggle(root.children[1].children[2]); toggle(root.children[9]); toggle(root.children[9].children[0]); update(root); }); function update(source) { var duration = d3.event &amp;&amp; d3.event.altKey ? 5000 : 500; // Compute the new tree layout. var nodes = tree.nodes(root).reverse(); // Normalize for fixed-depth. nodes.forEach(function(d) { d.y = d.depth * 180; }); // Update the nodes… var node = vis.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("svg:g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) .on("click", function(d) { toggle(d); update(d); }); nodeEnter.append("svg:circle") .attr("r", 1e-6) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); nodeEnter.append("svg: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 = vis.selectAll("path.link") .data(tree.links(nodes), function(d) { return d.target.id; }); // Enter any new links at the parent's previous position. link.enter().insert("svg:path", "g") .attr("class", "link") .attr("d", function(d) { var o = {x: source.x0, y: source.y0}; return diagonal({source: o, target: o}); }) .transition() .duration(duration) .attr("d", diagonal); // 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. function toggle(d) { if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } } &lt;/script&gt; </code></pre> <p>Basically what I have tried was to add this piece of code just before the <code>nodeEnter.append("svg:text")</code></p> <pre><code> nodeEnter.append("svg:a") .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("http://example.com") .style("fill-opacity", 1e-6); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USPaulo Tomé
    1. USsimonacca
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POD3 tree graph with links
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POD3 tree graph with links
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    3. VO
      singulars
      1. POD3 tree graph with links
      1. This table or related slice is empty.
      1. VTUpMod
    1. COShow some code and people might be able to help :)
      singulars
      1. POD3 tree graph with links
      1. USMattsjo
    2. COYou can use the click handler for example to achieve this, e.g. `.on("click", function(d) { window.location.href = d.something; });`.
      singulars
      1. POD3 tree graph with links
      1. USLars Kotthoff
    3. COthe problem is that the svg:a element has 0x1px dimensions and I can't manage to change that
      singulars
      1. POD3 tree graph with links
      1. USsimonacca
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload