CODEWITHSUNDEEP
javascriptd3.jspie-chart
rinatoptimus
rinatoptimus

Reputation: 421

How to change other segments of pie chart on mouseover in D3.js?

Now on mouseover "this" segment changes its opacity. How to make the other segment change its opacity but not "this"? In pure Javascript.

Upvotes: 2

Views: 920

Answers (1)

Gilsha
Gilsha

Reputation: 14591

You can use array filter function to find the other pie slices.

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Code:

var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc")
    .on('mouseover', function() {
        var current = this;
        var others = svg.selectAll(".arc").filter(function(el) {
            return this != current
        });
        others.selectAll("path").style('opacity', 0.8);
    })
    .on('mouseout', function() {
        var current = this;
        var others = svg.selectAll(".arc").filter(function(el) {
            return this != current
        });
        others.selectAll("path").style('opacity', 1);
    });


var json_data = [{
  "sex": "male",
  "name": "Ted",
  "age": 23
}, {
  "sex": "male",
  "name": "Mark",
  "age": 33
}, {
  "sex": "female",
  "name": "Mary",
  "age": 32
}, {
  "sex": "male",
  "name": "Valery",
  "age": 26
}, {
  "sex": "female",
  "name ": "Olga",
  "age": 29
}, {
  "sex": "male",
  "name": "John",
  "age": 26
}];

var width = 960,
  height = 500,
  radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
  .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var percentageFormat = d3.format("%");

var arc = d3.svg.arc()
  .outerRadius(radius - 10)
  .innerRadius(0);

var pie = d3.layout.pie()
  .sort(null)
  .value(function(d) {
    return d.values;
  });

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


//d3.json("staff3.json", function(error, json_data) {

  var data = d3.nest()
    .key(function(d) {
      return d.sex;
    })
    .rollup(function(d) {
      return d.length;
    }).entries(json_data);

  data.forEach(function(d) {
    d.percentage = d.values / json_data.length;
  });

  console.log("data variable", data);
  console.log("pie(data)", pie(data));

  var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc")
    .on('mouseover', function() {
      var current = this;  
      var others = svg.selectAll(".arc").filter(function(el) {
        return this != current
      });
      others.selectAll("path").style('opacity', 0.8);
    })
    .on('mouseout', function() {
      var current = this;
      d3.select(this)
        .style('opacity', 1);
      var others = svg.selectAll(".arc").filter(function(el) {
        return this != current
      });
      others.selectAll("path").style('opacity', 1);
    })   

  g.append("path")
    .attr("d", arc)
    .style("fill", function(d, i) {
      return color(i);
    });

  g.append("text")
    .attr("transform", function(d) {
      return "translate(" + arc.centroid(d) + ")";
    })
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .text(function(d) {
      console.log("d is", d);
      return percentageFormat(d.data.percentage);
    });
//});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Upvotes: 2

Related Questions