Having trouble with adding text to circles in D3 on a line?

I have successfully created some line charts on d3 and then added circles to every 3rd element of the line. Now I am attempting to add text to those circles as well.

// defining a circle variable

var circles=g2
    .append("g")
    .attr("id","symbols-b")
    .selectAll("circles")
    .data(slicesCircle)
    .enter()
    .append("g")

    circles.style("fill", function(d){
      return d.color=color(d.id);
    })

//appending circles to the graph

    circles
    .selectAll("circle")
    .data(function (d){return d.values})
    .enter()
    .filter((d,i)=>(i%3==0) && i>0) //attaching every 3rd data point
    .append("circle")
    .attr("r", 7.5)
    .attr("cx", function(d,i) {return xScale(d.date);})
    .attr("cy", function(d,i) {return yScale(d.measurement);})

// using the circle variable again to add text to the circles
    circles
    .selectAll("circle")
    .data(function (d){return d.values})
    .enter()
    .filter((d,i)=>(i%3==0) && i>0)
    .append("text")
    .attr("x",function(d,i) {return xScale(d.date);})
    .attr("y",function(d,i) {return yScale(d.measurement);})
    .text("0") // just for testing with 0 value
    .style("stroke","white")
    .style("font-size","12px")

However, upon running the code, I noticed that the last two blocks of code produce different outcomes. The circles are displayed correctly, but there seems to be a delay when adding text to themhttps://i.sstatic.net/j8cjK.png. I am puzzled as to why this is happening..

Answer №1

Modified the code by changing .selectAll("circle") to .selelctAll("text") in order to select each text placeholder instead of circles. This adjustment worked successfully.

// Using the circle variable again to append text
    circles
    .selectAll("circle")
    .data(function (d){return d.values})
    .enter()
    .filter((d,i)=>(i%3==0) && i>0)
    .append("text")
    .attr("x",function(d,i) {return xScale(d.date);})
    .attr("y",function(d,i) {return yScale(d.measurement);})
    .text("0") // testing with 0
    .style("stroke","white")
    .style("font-size","12px")
// Using the circle variable again to append text
    circles
    .selectAll("text")
    .data(function (d){return d.values})
    .enter()
    .filter((d,i)=>(i%3==0) && i>0)
    .append("text")
    .attr("x",function(d,i) {return xScale(d.date);})
    .attr("y",function(d,i) {return yScale(d.measurement);})
    .text("0") // testing with 0
    .style("stroke","white")
    .style("font-size","12px")

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

The issue I am encountering is that the value from jQuery autocomplete is not getting transferred to the

I'm having trouble retrieving a textInput from a Form where I am extracting values from Jquery Autocomplete. The selected value is not being transferred to the form. Can you please help me identify what I am missing? $(function() { var availableT ...

Enhance your MUI treeview by incorporating stylish connecting borders

I've been trying to add borders that connect to the nodes in the mui treeview, but I'm having difficulty with not having a vertical border when it's the last leaf node. It currently looks like this: See border example here. However, it sh ...

Ways to trigger a JavaScript function upon submission of my form

I have created a code snippet to validate and submit a contact form: formValidation: function() { if ( this.formData.name && this.formData.company && this.formData.email && this.formData.industry && this.formData.phone && this.fo ...

Utilizing JSON for live population of search filter results

I'm currently developing a search function for my website that will sift through a JSON Object using regular expressions. My goal is to have the results displayed in real time as the user types, similar to how Google shows search suggestions. However ...

Modify the text color of the fixed navigation when hovering over specific divs

Sorry if this question has already been asked. I've searched online but haven't come across a satisfactory solution. On my website, I have different background colors - blue and white. The text color in my navigation is mostly white, but I want i ...

Converting a JavaScript object to JSON within Node-RED

I am attempting to convert a JavaScript object created in my Node-RED flow to JSON format, but I am struggling to figure out how to do it. The object consists of an hour and minute displayed on the screen, such as "13:02". I need to see this in JSON format ...

Should I use YUICompressor or a comparable tool in PHP?

After using yuicompressor.jar for quick JavaScript minimisation on my test server, I ran into issues when deploying to my public server due to server restrictions on java execution. This means I need to find an alternative solution for on-the-fly JS compre ...

Transfer the value of a JavaScript variable to paste it into a fresh tab on Google Chrome

I have come across some examples where users can copy HTML text to the clipboard. However, I am working on something more dynamic. Here's what I'm trying to achieve: <button id="" ng-click="outputFolder()">Output Folder</button> $sc ...

What is the best way to use JavaScript in an ASP.NET Controller to navigate to a different webpage?

I'm currently developing a website using Angular 1 with an ASP.NET MVC backend. I'm trying to create a link that will gather certain parameters using JavaScript, retrieve the correct URL from a controller, and then redirect the user to a differen ...

React's useEffect() encounters error while retrieving data

I'm attempting to showcase data in this format: import React, {useEffect} from 'react' const Slider = ({ getData }) => { useEffect(() => { getData.map(item => console.log("data : ", ite ...

How to add page breaks with spacing and page numbers in HTML to PDF conversion?

Seeking assistance regarding adding spacing between page breaks within an HTML table to accommodate a page number at the bottom of each page. Below, I have depicted my current setup and what I aim to achieve. Is it feasible with the html2pdf library? http ...

Possible scope problem causing AngularJS image preview not showing up in ng-repeat loop

I came across this question and made some modifications. It works well when used outside of the ng-repeat. However, I'm facing issues when trying to use it within my repeat loop; the image.src does not update. I believe this is more related to the sc ...

Error message HMR Webpack was found to be invalid

When using Webpack, I keep encountering the following error message: Invalid HMR message, along with a lengthy JSON string. Unfortunately, I couldn't find any helpful resources to assist me in debugging this issue. Do you have any suggestions? https ...

Encountering an issue while trying to convert a JSON object into an array of a specific class type

When I receive a JSON object from a service, I want to iterate through this object and populate an array of class types. Below is the code used to call the service: public GetMapData(): Observable<Response> { var path = 'http://my.blog.net ...

Highcharts encounters issues with dateRange values disappearing after a refresh in older versions of IE (9 and below) and Chrome

const newCurrentIndex = findIndexForCounter(currentPCData.CounterID, currentPCData.NetworkID); if (currentIndex === newCurrentIndex) { $.each(model.Data, (j, point) => { ...

Using jQuery to create a seamless scrolling experience to both the top of a page and to

I've been looking for solutions on how to add both jQuery scroll to top and scroll to anchors, but haven't found any integrated options. Is it possible to achieve this here? We currently have a jQuery function in place to add a scroll-to-top fea ...

I'm struggling to make the jquery parentsUntil function work properly

Would appreciate some help with using the jquery parentsUntil method to hide a button until a radio box is selected. I've been struggling with this for a few days now and can't seem to figure out what I'm doing wrong. Any insights would be g ...

Unable to display tags with /xoxco/jQuery-Tags-Input

I'm experimenting with the tagsinput plugin in a textarea located within a div that is loaded using the jquery dialog plugin. The specific plugin I am using is /xoxco/jQuery-Tags-Input. After checking that the textarea element is ready, I noticed th ...

Looking to develop a method that extracts a value from an array, saves it, and transfers it to another array exclusively through the use of .pop and .push methods

I'm currently working on an assignment for my JS course that involves creating a function using only .push and .pop commands. The task is to take the last value from the first array and move it to the second array. Unfortunately, I seem to be messing ...

The mui-datatables demo fails to display the code snippet as intended

Just diving into React and attempting to grasp MUI-datatables. The code snippet from the Codebox provided on the library's page isn't displaying in my browser, resulting in an empty page. Surprisingly, the console isn't showing any errors. ...