score:1
Accepted answer
You can use the y
attribute to position vertically your text. Your code is a bit hard to test because we don't have access to your json, so blindly the code for the text part would be :
node.append("text")
.text(function(d) {return d.children ? "" : d.name ;})
.attr("text-anchor", "middle")
.attr("class", "nodetext")
.attr("data-classname", function(d) {return d.className;})
.attr("style", function(d) {return "font-size:" + d.r/4;})
.on("click", function(d) { window.open("https://twitter.com/hashtag/" + d.name.trim() + "\?src=hash"); })
.on("mouseover", function(d) {
d3.select(this).attr("r", 10).style("fill", "#2f4cff");
d3.select(this).style("cursor", "pointer");
})
.on("mouseout", function(d) {
d3.select(this).attr("r", 5.5).style("fill", "#000");
});
node.append("text")
.text(function(d) {return d.children ? "" : d.value ;})
.attr("text-anchor", "middle")
.attr("class", "nodevalue")
.attr("y", 15) // adding y attribute to offset vertically your text
.attr("data-classname", function(d) {return d.className;})
.attr("style", function(d) {return "font-size:" + d.r/4;});
Source: stackoverflow.com
Related Query
- How can I position text inside bubble chart?
- How can I wrap the long label text in the bubble chart in d3?
- How can I position rotated x-axis labels on column chart using nvd3?
- How can I set up a d3 chart inside a custom directive in Angular?
- How can I add different images instead of text inside d3.js piechart slices
- How to fix the draggable function in a bubble chart with text inside?
- How to position text labels on a Sunburst chart with d3.js
- How can i set the tick text of x-axis between bar in a bar chart in c3.js or d3.js?
- How to keep circles inside the svg when updating data in bubble chart
- How to place text inside each bar of the chart using d3
- How can I include a D3 (Scatterplot) Chart inside a SAPUI5 Control
- How to scale text in a D3 bubble chart
- D3.js - how can I position a force chart upwards and to the left of a page?
- How can I add title text to this chart in d3?
- How to set text color for my d3 chart title?
- MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
- How can I dynamically resize an SVG rect based on text width?
- How can I keep tick marks from repeating when I have a small number of dates on an nvd3 chart
- D3 bubble chart / pack layout - How to make bubbles radiate out from the largest bubbles to the smallest?
- How to right/end align text along an textPath inside an arc using d3.js?
- D3.js - How can I add a new line to the text in this Collapsible Tree?
- D3.js - How can I prevent Circles & Text Overlapping
- How do I add labels to d3.js force bubble chart
- How can I center text on a D3.js SVG grid rect?
- Using Javascript D3 library, how can I determine mouse position in data set of an area element on mousemove event?
- How do I always keep my d3 line chart rollover text always visible?
- How to pack text inside svg rect
- How to Update bubble chart in d3.js?
- How can I center the text in a node?
- D3: How can I change data in an existing bar chart
More Query from same tag
- Django Rest Framework nested serializer
- d3.js force directed graph sphere
- d3 bar chart labels not getting updated on updating the chart with the new data
- D3 Apply projection to d3-tip tooltip
- text & mouse over and mouse out value on bar graph in d3.js
- d3js call animations on an object, enter/append is not a function
- d3.timeFormat returns NaN
- how to import php script that convert mysql data to json format, from d3.json function in force directed layout
- With NVD3.js (nv.models.lineWithFocusChart), how do you set specific ticks on X-axis, when x values are dates?
- How do you change the width of a Y-axis in a D3 chart?
- To get the xy coordinates of dropped element on svg:image in d3
- Set Colors of zoomable treemap conditionally
- d3 on click on circle pause and resume transition of marker along line
- How to initialize d3.scale.utc() using moment.js
- Getting result of query in django view in d3
- How to show multiple lines in a d3 line graph?
- Attach "Change" event to select2 list created with d3
- Manipulating node parent children behaviour on the basis of checkbox
- Line chart zoom for multiseries d3js v5 chart
- d3v4 - zooming (Equivalent to d3.zoom.x)
- D3 treeview - start with collapsed nodes
- Applying gravity to a bounded d3.js force layout
- Edit the data in a pie chart rather than create a new one
- How do i integrate a custom d3map visualisation into Microstrategy?
- jQuery page scroll event logic -- how to throttle
- D3.js Chord diagram - Have text appear/disappear when hovering over an arc
- Transposing the values of d3.nest result
- how to focus the clicked bar in C3.js bar graph?
- Ragged list or data frame to JSON
- How to draw bar chart with range x-axis?