Databases
StackOverflow2013
Postsdbo
POPlacing labels at the center of nodes in d3.js
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPlacing labels at the center of nodes in d3.js
    primarykey
    data
    text
    <p>I am starting with d3.js, and am trying to create a row of nodes each of which contains a centered number label.</p> <p>I am able to produce the desired result visually, but the way I did it is hardly optimal as it involves hard-coding the x-y coordinates for each text element. Below is the code:</p> <pre><code>var svg_w = 800; var svg_h = 400; var svg = d3.select("body") .append("svg") .attr("width", svg_w) .attr("weight", svg_h); var dataset = []; for (var i = 0; i &lt; 6; i++) { var datum = 10 + Math.round(Math.random() * 20); dataset.push(datum); } var nodes = svg.append("g") .attr("class", "nodes") .selectAll("circle") .data(dataset) .enter() .append("circle") .attr("class", "node") .attr("cx", function(d, i) { return (i * 70) + 50; }) .attr("cy", svg_h / 2) .attr("r", 20); var labels = svg.append("g") .attr("class", "labels") .selectAll("text") .data(dataset) .enter() .append("text") .attr("dx", function(d, i) { return (i * 70) + 42 }) .attr("dy", svg_h / 2 + 5) .text(function(d) { return d; }); </code></pre> <p>The <code>node</code> class is custom CSS class I've defined separately for the <code>circle</code> elements, whereas classes <code>nodes</code> and <code>labels</code> are not explicitly defined and they are borrowed from this <a href="https://stackoverflow.com/questions/11102795/d3-node-labeling/11109803#11109803">answer</a>.</p> <p>As seen, the positioning of each text label is hard-coded so that it appears at the center of the each node. Obviously, this is not the right solution.</p> <p>My question is that how should I correctly associate each text label with each node circle dynamically so that if the positioning of a label changes along with that of a circle automatically. Conceptual explanation is extremely welcome with code example.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USskyork
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POPlacing labels at the center of nodes in d3.js
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POPlacing labels at the center of nodes in d3.js
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POPlacing labels at the center of nodes in d3.js
      1. USInactivist
      1. VTFavorite
    1. COText anchors appear to not work directly in D3 yet, but did you tried something as simple as CSS text-align? This should do the trick! http://www.w3schools.com/cssref/pr_text_text-align.asp Also try to take a look at posts like these from the d3 Google Group: https://groups.google.com/forum/#!searchin/d3-js/text-align/d3-js/M6a-97ajkWs/rHJV4_WrhX0J%5B1-25%5D
      singulars
      1. POPlacing labels at the center of nodes in d3.js
      1. USpaxRoman
    2. COWhere are you getting the idea that text anchors do not work in d3?
      singulars
      1. POPlacing labels at the center of nodes in d3.js
      1. USBrant Olsen
    3. COfew months ago they did not worked...thanks for clarifying :) nice to see a simple approach to this problem
      singulars
      1. POPlacing labels at the center of nodes in d3.js
      1. USpaxRoman
 

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