title: D3 how to change a circle to rectangle on a mouseover
body: <p>I'm working on a project in D3 – and at the moment <strong>I wanna change a circle into a rectangle when a user hover over a circle,</strong> but I don't know how I have to start.</p>
  
  <p>My starting point is the circle (->transition into rectangle).</p>
  
  <pre><code>svg.selectAll(".circle")
    .on('mouseover', function(d){
    d3.selectAll(".circle")
    .transition()
    .attr (...)
  })
  </code></pre>
  
  <p>Is this the right approach? I know there is a similar question (<a href="https://stackoverflow.com/questions/17437408/how-to-change-a-circle-into-a-square-with-d3-js">How to change a circle into a square with d3.js</a>) but I think this is not the right way for my purpose. But really – I'm not sure^^</p>