CODEWITHSUNDEEP
javascriptd3.js
Charlie
Charlie

Reputation: 333

How to use 'click, mouseover, mousedown' and so on in d3 v4

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:

selection.on("mousedown touchstart", function() {
  console.log(d3.event.type);
});

But it still can't work. Here is my code:

<html> 
 <head> 
    <meta charset="utf-8">         
    <title>a bar</title> 
 </head> 
 <style>
    .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;
    }
 </style>
    <body>
        <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
        <script>
        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);
        </script>
    </body> 
</html>

I'm a beginner, could you help me? Or giving me an useful suggestion is also okay. Thankyou!

Upvotes: 3

Views: 3467

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

Registering mouseover and mouseout is same in d3.v4, same as what you are doing.

But instead of using attr:

.on("mouseover",function(d,i){
              console.log("hello")
                d3.select(this)
                    .attr("fill","yellow");//it is style not attribute
            })
            .on("mouseout",function(d,i){
                d3.select(this)
                    .transition()
                    .duration(500)
                    .attr("fill","steelblue");//it is style not attribute
            });

you should have used style :

.on("mouseover",function(d,i){
              console.log("hello")
                d3.select(this)
                    .style("fill","yellow");//it is style 
           })
            .on("mouseout",function(d,i){
                d3.select(this)
                    .transition()
                    .duration(500)
                    .style("fill","steelblue");//it is style 
            });

working code here

Upvotes: 4

Related Questions