title: How to use 'click, mouseover, mousedown' and so on in d3 v4
body: <p>I am working on this force graph in D3 v4.
  When a user move his mouse, the color of the bar will be changed. In d3 v3, my code can work very well. But when I use it in d3 v4, it doesn't work. In the official introduction, I can use like this:</p>
  
  <pre><code>selection.on("mousedown touchstart", function() {
    console.log(d3.event.type);
  });
  </code></pre>
  
  <p>But it still can't work.
  Here is my code:</p>
  
  <pre><code>&lt;html&gt; 
   &lt;head&gt; 
      &lt;meta charset="utf-8"&gt;         
      &lt;title&gt;a bar&lt;/title&gt; 
   &lt;/head&gt; 
   &lt;style&gt;
      .axis path,
      .axis line{
          fill: none;
          stroke: black;
          shape-rendering: crispEdges;
      }
  
      .axis text {
          font-family: sans-serif;
          font-size: 11px;
      }
  
      .MyRect {
          fill: steelblue;
      }
  
      .MyText {
          fill: white;
          text-anchor: middle;
      }
   &lt;/style&gt;
      &lt;body&gt;
          &lt;script src="http://d3js.org/d3.v4.min.js" charset="utf-8"&gt;&lt;/script&gt;
          &lt;script&gt;
          var width=400;  
          var height=400; 
  
          var svg=d3.select("body")  
                    .append("svg") 
                    .attr("width",width)  
                    .attr("height",height); 
  
          var padding = {left:30, right:30, top:20, bottom:20};
  
          var dataset=[10,20,30,40,33,24,12,5];  
  
  
          var xScale = d3.scaleBand()
                         .domain(d3.range(dataset.length))
                         .range([0, width-padding.left-padding.right])
                         .padding(0.2);  //some value here 
  
  
          var yScale = d3.scaleLinear()
                         .domain([0,d3.max(dataset)])
                         .range([height-padding.top-padding.bottom,0]);
  
          var xAxis = d3.axisBottom()
                        .scale(xScale);         
  
          var yAxis = d3.axisLeft()
                        .scale(yScale);
  
          var rectPadding=4;  
  
          var rects = svg.selectAll(".MyRect")
              .data(dataset)
              .enter()
              .append("rect")
              .attr("class","MyRect")
              .attr("transform","translate(" + padding.left + "," + padding.top + ")")
              .attr("x", function(d,i){
                  return xScale(i) + rectPadding/2;
              } )
              .attr("y",function(d){
                  return yScale(d);
              })
              .attr("width", xScale.bandwidth() - rectPadding )
              .attr("height", function(d){
              return height - padding.top - padding.bottom - yScale(d);
              })
              .attr("fill","steelblue")       
              .on("mouseover",function(d,i){
                  d3.select(this)
                      .attr("fill","yellow");
              })
              .on("mouseout",function(d,i){
                  d3.select(this)
                      .transition()
                      .duration(500)
                      .attr("fill","steelblue");
              });
          var texts = svg.selectAll(".MyText")
                         .data(dataset)
                         .enter()
                         .append("text")
                         .attr("class","MyText")
                         .attr("transform","translate(" + padding.left + "," + padding.top + ")")
                         .attr("x", function(d,i){
                                  return xScale(i) + rectPadding/2;
                          })
                         .attr("y",function(d){
                                  return yScale(d);
                          })
                          .attr("dx",function(){
                                  return (xScale.bandwidth() - rectPadding)/2;
                          })
                         .attr("dy",function(d){
                                  return 20;
                          })
                         .text(function(d){
                                  return d;
                          })
  
          svg.append("g")
             .attr("class","axis")
             .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
             .call(xAxis); 
  
  
          svg.append("g")
             .attr("class","axis")
             .attr("transform","translate(" + padding.left + "," + padding.top + ")")
             .call(yAxis);
          &lt;/script&gt;
      &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm a beginner, could you help me? Or giving me an useful suggestion is also okay. Thankyou!</p>