Databases
StackOverflow2013
Postsdbo
POrefreshing graph in d3js
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POrefreshing graph in d3js
    primarykey
    data
    text
    <p>I've been working with the d3.js library for a bit now and I love the visualizations, but I'm having a hard time achieving exactly what I need.</p> <p>What I'm trying to do: </p> <ul> <li><p>I've constructed a graph with a central node that is styled differently from the other nodes. The visualization has a label in the center (a special node with id=node0), and connected to that label are the other styled nodes.</p></li> <li><p>When user hits submit, an ajax call refreshes the javascript information and restarts the simulation with new nodes.</p></li> </ul> <p>I've set things up in the same way as I see here:</p> <p><a href="https://stackoverflow.com/questions/11606214/add-and-remove-nodes-in-d3js">Adding and Removing Nodes in D3js Force Graph</a></p> <p>My refresh function looks like this:</p> <pre><code> function restart() { for ( ii = 0; ii &lt; nodes.length; ii++ ) { var n = nodes[ii]; if (n.id == 0) { n.fixed = true; n.x = w/2; n.y = h/2; continue; } mult1 = [ -1.0, -1.0, 1.0, 1.0 ]; mult2 = [ 1.0, -1.0, -1.0, 1.0 ]; n.x = w/2 + ii*5 * mult1[ii%4]; n.y = h/2 + ii*5 * mult2[ii%4]; } var node = svg.selectAll("g.node") .data(nodes, function(d) { return d.id;}); var nodeEnter = node.enter().append("g") .attr("id", function(d) { return "node" + d.id }) .attr("class", "node") .call(force.drag); node.exit().remove(); node.each( function(d) { if (d.id != 0) { n = svg.select("#node" + d.id); frame = n.append("svg:foreignObject") .attr("x", -1.0 * platewidth/2) .attr("y", -1.0 * plateheight/2) .attr("width", platewidth) .attr("height", plateheight) .on("click", showdetail) .on("tap", showdetail); frame.append("xhtml:div") .attr("class", "top-plate") .html(function(d) { return "&lt;img src='/img/" + d.img + "'&gt;" } ); frame.append("xhtml:div") .attr("class", "btm-plate") .html( function (d) { return d.name }); n.append("image") .attr("xlink:href", function(d) { return d.ownerimg }) .attr("x", platewidth/2 - 35) .attr("y", plateheight/2 - 15) .attr("width", 30) .attr("height", 30) .on("click", showdetail) .on("tap", showdetail); n.append("image") .attr("xlink:href", function(d) { return d.houseimg }) .attr("x", platewidth/2 - 70) .attr("y", plateheight/2 - 15) .attr("width", 30) .attr("height", 30) .on("click", showdetail) .on("tap", showdetail); } else { querytext = d.query; n = svg.select("#node" + d.id); n.append("text") .attr("text-anchor", "middle") .text(querytext); n.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); } }); force.start(); } </code></pre> <p>The problems I'm having:</p> <ul> <li><p>The second DIV element of the nodes (the one with the HTML element containing d.name) does not reposition in Chrome. It works fine in Firefox, but in Chrome all these DIVs show up at 0,0. Note that the first DIV of these nodes (which has the img tag), as well as all the images attached to the nodes, all show up fine and reposition properly. It's just this second DIV which is not repositioning with the associated node.</p></li> <li><p>I can't get the label text of node0 to update/change correctly. When I pass new text in (using d.query) that text overwrites the old text so that both show up. I think I need to remove the "text" element associated with node0 first, but I'm not sure how to do that.</p></li> <li><p>Generally, I'm not really sure I'm using this library the right way. The difficulty here stems from the fact that I'm attaching a lot to the nodes and that I have one special central node that behaves differently than the others. So any pointers on how to do this better would be appreciated.</p></li> </ul> <p>Thanks</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USjb44
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COAn example would help. Do you have a working JSFiddle?
      singulars
      1. POrefreshing graph in d3js
      1. USEnigmaRM
    2. COAnd I know that I sometimes have issues with my transitions in Chrome as well. Seems to cache things when I'm working on updating code. So when testing code, I usually stick with FF. Then things are usually fine in Chrome when it is finally in production.
      singulars
      1. POrefreshing graph in d3js
      1. USEnigmaRM
 

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