D3 v4 Scatterplot chart data points are not updating on zoom

Question

I am working on scatter-plot chart with d3 v4 and wanted to apply zooming so that I can see the data points when they overlap each other, the problem I am facing here is both x and y axis are working fine but data points are not updating for some reason.

I am trying to select the dots/circles and draw them again but for some reason I couldn't select them, I have no clue why the dots are not updating, any help is much appreciated.

Note: my application is in Angular 4 , since I couldn't find the angular 2/4 template here in plunker I had to do in JavaScript .

Answer 1

You just missed 2 minor things:

1. In the zoom function, the scales to be used would be the new X and Y scales , as you've to transform the circles in the new domain.

    circles.attr('cx', (d) => xNewScale(d.duration)) .attr('cy', (d) => yNewScale(d.priority)); 

2. Selection :

    var circles = svg.selectAll('dot') .data(chartData) .... .append('svg:title') .html(...) 

would actually return the "titles" as the current selection and so now, the variable circles is a node group of titles whose attributes (cx and cy) get changed in the zoom function which is not what we want as we want to change the attributes of the <circle> s. And so, changing the above to the following:

// Add the scatterplot
var circles = svg.selectAll("dot")
  .data(chartData)
  .enter()
  ....
  .attr('fill' ..);

// NOTE THE CHANGE HERE
circles
  .append('svg:title')
  .html(d => {
    return 'Date : ' + timeFormat(new Date(d.start)) + ',<br> Description: ' + d.description + ',<br> Impact: ' + d.priority + ',<br> Hours: ' + Math.round(d.duration)
  });

Similarly, I've made changes to the red circles (outer).

Comprising all of the above, here's a fork of your code:

https://plnkr.co/edit/61zf86q6cpIT4MIyhZKo?p=preview

Hope this helps.