D3 js - onClick of circle I want to add the area in background of that

Question

I have a d3 chart, In the chart on click of the circle I am making circle size bigger d3.select(this).attr("r", 9);

My requirement is I want to add the area in background with blue color on top of the circle as depicted in below image,

I tried to add an area with color on the background but it's not working. Please suggest to me. Thanks.

My on Click code -

.on("click", function(d) {
        d3.selectAll(".green-circle").attr("r", 5);
        d3.selectAll(".red-circle").attr("r", 5);
        d3.select(this).attr("r", 9);
      })

I tried to add line onClick but it adds the content inside circle I tried to get the parentNode also but no luck.

  d3.select(this).append("line")
              .attr("id", "focusLineX")
              .attr("class", "focusLine");

<circle cx="568.2359387326708" cy="100" r="9" class="green-circle" style="fill: transparent; stroke: black; stroke-width: 0.25;">
<line id="focusLineX" class="focusLine"></line>
</circle>

My Code sand box - https://codesandbox.io/s/polished-bush-iqvrx

Answer 1

You need to add the new object to your chart, not to your circle. Based on your code that you have shared (thank you for doing it, it makes it much easier to help!) you should be adding to g object.

I am not sure if the changes I made have reflected, I suppose you can't see them, so here is what I have changed so far:

Declare a rect variable somewhere, I did it right after newX variable:

// A function that updates the chart when the user zoom and thus new boundaries are available
var newX = "";
var rect;

And then within the on("click") function, put this code in the beginning:

    if (rect) rect.remove();
    rect = g
      .append("rect")
      .attr("x", xScale(d.startTime) - 5)
      .attr("y", 0)
      .attr("width", 10)
      .attr("height", height)
      .attr("data", d.startTime)  // Need to save original x Position for scroll to work properly
      .style("fill", "navy");

I am using rectangle with navy fill, but feel free to play with the styles, this is just to give you an idea how you could be doing what you are looking for.

I hope this is helpful, let me know if you have any questions.

* UPDATE * Also following line needs to be added to the end of the updateChart function to make bar scroll with the rest of the graphics:

  if (rect) rect.attr("x", newX(rect.attr("data")));

* UPDATE 2 * So for zoom+scrolling both working properly you need to use newX function everywhere, as this function provides with the x coordinate updated according to both zoom and scroll values.

Also in the updateChart function you need to subtract half of the column width as well, so that column does not jump to the right.

Working code can be found her: CodeSandbox