How to append a circle to each point of each valueline in d3js?

Active3 hr before
Viewed126 times

7 Answers


Try the changes below noting the use of an iterator to differentiate the class/selection of dots for each line. You could use something else like an attribute of the data e.g. name etc.,Connect and share knowledge within a single location that is structured and easy to search.,Asking for help, clarification, or responding to other answers.

Also not i've moved the line and color scale functions out of your forEach loop as they don't need to be declared multiple times. The same applies to your tooltip which could resused instead of adding multiple divs to the DOM.

var valueline = d3
 .x(function(d) {
   return x(d.circuit);
 .y(function(d) {
   return y(+d.points);

var colorScale = d3
    .scaleSequential(interpolateRainbow) //.scaleSequential(d3.interpolateRainbow)
    .domain([1, 20]);

var div ="body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);

Object.values(data).forEach((item,k) => {

    .attr("class", "line")
    .style("stroke", colorScale(item.constructor))
    .attr("d", valueline);

    var xScale = d3
    .domain([0, item.results.length-1]) // input
    .range([0, width]); // output

    .append("circle") // Uses the enter().append() method
    .attr("class", "dot-"+k)
    .attr("r", 5) // Assign a class for styling
    .attr("cx", function(d, i) {
      return xScale(i);
    .attr("cy", function(d, i) {

      return y(d.points);
    }).on("mouseover", function(d) {        
     let points = item.results.filter(xd => xd.circuit==d.circuit)[0].points
          .style("opacity", .9);        
      div   .html( + "<br/>"  + points)    
          .style("left", (d3.event.pageX) + "px")       
          .style("top", (d3.event.pageY - 28) + "px");  
  .on("mouseout", function(d) {     
          .style("opacity", 0); 

In D3, if you want to add some data to DOM elements, you would create what is called a “Enter, Update, Exit” cycle. For example, You want to create a set of rectangles each having a height as given in an array you’d do : ,D3 gives you a clean way to add/remove attributes for a selected DOM element. For example, you’d like to set the width and height of your <svg> : ,.gravity() – sets a pseudo-gravity force that attracts our nodes to the center of the area

 Pretag team - issue, fix, solve, resolve

First trick is to add a rectangle on top of the svg area that will track the mouse position thanks to style("pointer-events", "all"),This post follows the previous basic line chart with d3.js. It describes how to add a cursor that displays the exact value of the nearest X axis value. See more line chart examples in the dedicated section.,Once we have this position, we just need to use it to update the circle and text position on the chart.

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src=""></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

load more v

Now, save the file and perform the following steps to draw a line graph in D3. Let us go through each step in detail.,Step 1 − Adding styles − Let us add a style to the line class using the code given below.,Now request the browser and we will see the following result.

When we talk about drawing a circle with x = 30 and y = 30 coordinates in the SVG Coordinate Space, we go 30 units from the top left to the right and then we go down 30 units up. It is defined as follows.

var svgContainer = d3
   .attr("width", 200)
   .attr("height", 200);
load more v

Each data point is drawn as a circle. ,Circles will be used for each data point.,The position for cy is set using the y scale() and yFemaleLE Here yFemaleLE is d.

load more v

index.html — will contain the root HTML element to which we’ll append our SVG element with the help of D3,To append data to our chart, we’ll create the appendData() function.,4. Define the chart’s area and line. area() and line() are D3 helper functions. The area function transforms each data point into information that describes the shape, and the line function draws a line according to data values. curveCardinal is the type of line/area curve (check D3 curve explorer for more).

 Pretag team - issue, fix, solve, resolve

Other "circle-append" queries related to "How to append a circle to each point of each valueline in d3js?"