While writing up this question I found the solution (but still going to post it because I spent a very long time searching before finding it deep in a code example). Might be just because I am brand new to d3 and svg this month but there is a
getBBox() method on the text element (most elements) that will generate an object with the width/height/x/y (and it really should be used instead of jquery for all svg dimensions).
Hope posting this will help anyone else who runs into this problem because it did not seem very visible to me.
And in the example the
~~ is a flip-bit-operator, twice will actually work like a Math.floor() but will likely be faster in all browsers then
Got the same problem. Seems like there is a bug in firefox (45.0) that <text> elements width inside SVG is always 0.
I overcame the bug by using a <tspan> element (inside the <text> element), and seems like the <tspan> has the correct width of text.
Hope it helps.
- The width seems to be zero (or NaN) always for an svg:text element in Firefox 15
- D3.js: How to get the computed width and height for an arbitrary element?
- How do I get the width of an svg element using d3js?
- D3 treemap: reserve min width and height for the smallest node
- d3.js v4.9 Get the calculated width of selected element
- Transitioning a bar chart with negative values for the width
- How to Increase the width of C3 pie chart Legend only. Not for the whole graph
- How to properly set the type for property `d` in `path` element in a d3 react typescript application
- What is the default width and height of a group element in html (if it has any)?
- Pie layout produces different ordering on Firefox and Chrome for the same dataset
- How do I change the z-index of a canvas element for DC.JS plot?
- How to get the position and width of a tspan element
- How to define the width and id of an element created by .append()?
- How do append a <text> for every element of the data in a D3 svg
- Need to find the number of rows with the same value for a column element in a CSV file
- What is the relationship between the width/height specified for a d3.select element and the actual drawing area?
- d3 - Create new element from the dataset for each node in the selection
- anti aliasing issue with the width of SVG element path
- What is the d3.js v4.0 equivalent for d3.scale.category10()?
- How to access the DOM element that correlates to a D3 SVG object?
- How do I display dates on the x-axis for nvd3 / d3.js?
- Accessing d3.js element attributes from the datum?
- d3.select("#element") not working when code above the html element
- Calculate width of text before drawing the text
- D3 Differentiate between click and drag for an element which has a drag behavior
- read width of d3 text element
- Whats the replacement for @Scripts.Render in MVC 6
- D3: Create a continuous color scale with many strings/inputs for the range and dynamically changing values of the domain
- Auto width and height for SVG image
- Is D3.js the right choice for real-time visualization of Neo4j Graph DB data
More Query from same tag
- Bootstrap doesn't let me use data with other libraries
- D3.js animate a circle along x, y coordinates
- D3 Reactangle Bar with color gradient depending on value
- D3: enter(), exit() on mouseover/mouseout
- typescript line chart d3
- selectAll("rect") selects all rectangles, but doesn't apply the mouseover function to some
- Center a specific node into a scene with 3d-force-graph
- Bold the text partially in a text box which popos up on mouseover-D3
- Fit D3 map in SVG
- D3: Setting selection transform attribute in a nicer way
- D3js: how to plot multiseries line chart with json data
- i change the "class" attribute of a node that exist in SVG, but not applied ! why?
- Radiating Spokes Off Of A Circle
- concentric emanating circles d3
- How to plot GeoJson data in d3.js
- Bar Chart inside Stacked Bar Chart
- d3 force on removing a node remove associated edges
- How do I add a simple mouseover info window
- How to set time axes labels (ticks) based on German locale
- How to generate links towards right side in force layout D3.js
- How can I group data to be filtered without losing crossfilter functionality using dc.js?
- Circle chart with repulsive circles
- d3.js visibility-zone calculations or how to draw geo rectangle
- d3 axes not appearing
- Create D3 Bar Chart from array of timestamps
- ClientWidth and ClientHeight are undefined
- Does the Twitter Bootstrap 3 conflict with D3.js/Dimple.js?
- How do I manipulate the axis of a svg chart?
- d3.js, collapsible tree - how to connect different parents with same child
- D3.js: Expand tree till node n