What is preventing me from obtaining the Bounding Box of this text in d3.js?

I've come across a challenge while working with d3.js to draw text onto an SVG using the following code:

var myText = svgContainer.append("text")
    .attr("x", 10)
    .attr("y", 20)
    .text("Lorem Ipsum")
    .attr("font-weight", "bold")
    .attr("fill", "white");

Now, I need to find the bounding box of this text. How can I achieve this? I attempted the following:

console.log("getBBox = ", myText.getBBox());

However, it resulted in this error message:

Uncaught TypeError: myText.getBBox is not a function
javascriptd3.jssvg

Answer №1

myRect is a d3 selection and should not be confused with an html element.

You can use the following code to get the bounding box of myRect:

myRect.node().getBBox();


var svgContainer = d3.select("svg");  

var myRect = svgContainer.append("text")
                .attr("x", 10)
                .attr("y", 20)
                .text("Lorem Ipsum")
                .attr("font-weight", "bold")
                .attr("fill", "white");

console.log("getBBox = ", myRect.node().getBBox());
svg{
  background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="500" height="800"></svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to incorporate tailored validation into reactive forms in Angular?

I'm facing an issue with my form where I'm trying to display a specific error message based on certain conditions. Currently, my form is functioning but it's throwing a type error stating "undefined is not an object". I'm struggling to ...

javascripthtmlangulartypescript

Tips for generating dynamic JSON: Organize the data by filtering it and creating key-value pairs for the appropriate JSON objects

How can I generate dynamic JSON based on input, filter data, and create appropriate key-value pairs for JSON objects? The database schema can be viewed https://i.sstatic.net/iP1JS.png Although I attempted the following code, it did not produce the desi ...

javascriptjsonajaxobject

Photo uploading in ASP.NET MVC - encountering null HttpPostedFileBase issue

QUESTION: I'm having an issue where the Photo1 value is null in the controller post method despite uploading it. Can someone help with this? This is my model class: class ProductVM{ public string Name { get; set;} public string Color {get; ...

javascriptasp.net-mvc

Combine elements from two separate arrays

Is there an efficient method for combining objects from two arrays into a new list in JavaScript? a = [{a:1, b:2, c:3}, {d:1, e:4, f:2}] b = [{m:1, n:2, o:4}, {r:1,s:3,u:5}, {k:1,j:4,f:8}] z = [{a:1, b:2, c:3, m:1, n:2, o:4}, {d:1, e:4, f:2, r:1,s:3,u:5}, ...

javascriptarraysobjectecmascript-6

Monitor a webhook on the server side with Meteor

I have created a meteor application using iron-router. I want the app to be able to receive webhooks from another service, essentially creating an API for other services to utilize. For example, when an external website calls myapp.meteor.com/webhook, I n ...

javascriptnode.jsmeteorroutes

Submitting form data to PHP without refreshing the page

I've been attempting to send form data, specifically an array, to a PHP file without having the page refresh. I've implemented AJAX for this purpose but it doesn't appear to be working as intended. Below you'll find the syntax of the fo ...

javascriptphpajaxforms

The Material-UI dialog is experiencing a flickering issue when incorporating Redux to manage the open

I am currently facing an issue with moving the open state of a material-ui dialog to redux in order to prevent it from closing during a rerender. However, I am encountering difficulties with the dialog's behavior when a rerender occurs. Even though th ...

javascriptreactjsreduxmaterial-ui

Utilizing Ajax/jQuery to Send Variables to PHP

I'm having a bit of trouble with a simple task. I'm using a jQuery script to show a timer and then I want to send the number of seconds to a PHP file. When I alert the value variable, it shows the correct data, so I know I'm accessing it cor ...

javascriptphpjqueryajax

Having difficulty transforming ".jsx" to ".tsx" in a Next.js application while working with "getStaticProps"

My application utilizes the Printifull API and performs well with .jsx using the code snippet below: import axios from "axios"; export default function ApiTest(props) { console.log(props); return( <></> ( } export async ...

javascriptreactjstypescriptnext.jsreact-typescript

Creating an intelligent autocomplete feature in JavaScript that recognizes the . character as a wildcard for matching any character

I found this code and would like to enhance its functionality. For instance, when I search for ".an.d", I want the code to display all words that have an "a" at the second position, "n" at the third position, any character at the fourth position, and "d" ...

javascripthtmlcss

Set a variable to represent a color for the background styling in CSS

My goal is to create an application that allows users to change the background color of a button and then copy the CSS code with the new background color from the <style> tags. To achieve this, I am utilizing a color picker tool from . I believe I ...

javascriptphpcss

What is the best way to use setInterval with multiple objects?

Subject: Here is an example of JavaScript code: var User = function(data){ this.name = data.name; this.delay = data.delay; this.say(); } User.prototype.say = function(){ _self = this; setInterval(function(){ console.log(_self.name); }, t ...

javascriptsetinterval

Extracting content from a concealed frame and displaying it on a visible frame via javascript

Is there a method to extract a specific DIV element from an HTML frame and display it in a visible frame using JavaScript? For instance, if I create a hidden frame containing Google search results, is there a way to show only the search results on the vis ...

javascriptjqueryajax

Retrieve the ultimate content of a text field when a key is pressed, only if the click action is permitted to proceed

Is there a method to prevent users from entering certain characters into a text box based on the resulting text in the textbox? One possible approach is outlined below: <input type="text" id="test" /> document.getElementById(&qu ...

javascripthtmladdeventlistenerkeypresskeyup

Mapping data using MapState is a useful technique that can help organize and access data

Is it possible to use ...mapstate to fetch data from the store instead of directly accessing it like this.$store.state.workermanage.staff.staff? Any suggestions are appreciated, thank you. persons: this.$store.state.workermanage.staff.staff ...

javascripttypescriptvue.jsvuexnuxt.js

Anomalous behavior of buttons in react-redux

Currently, I have a basic counter set up in react-redux as part of my learning process with these frameworks. My goal is to create a pair of number input fields that determine the payload for an increment/decrement action sequence. The intended outcome is ...

javascripthtmlreactjsreduxreact-redux

Adding elements to a global array via a callback function in JavaScript: A step-by-step guide

I am currently working on querying and adding users to a global array from my database. My goal is to store the elements in this global array so that I can access it from any part of my application. app.get("/admin/orders", (req, res) => { Q ...

javascriptexpressmongoose

Transforming a series of numbers separated by commas into numerical values

I need to process a list of comma-separated numbers using the math.js library in Node.js. Even though I successfully split the numbers into an array, the math.add() function requires individual integers instead of an array. I want to find a way to provid ...

javascriptnode.jsexpressmathjs

Changing HTML lists into JSON format

I am facing a slight issue with my HTML template while trying to convert it to JSON. My goal is to convert a list of HTML messages into JSON format. I appreciate your assistance in advance. HTML Template <div class="message"> <div class="mes ...

javascriptjqueryjson

Having difficulties fetching images from the Twitter API

I'm encountering an issue with a simple Twitter API request for a specific tweet. Although the tweet should have multiple images attached to it, the media entity object is returning empty. Here's the tweet in question: https://twitter.com/talonc ...

javascriptruby-on-railsruby-on-rails-4twitter