CODEWITHSUNDEEP
javascripthtmld3.jspie-chart
SNT
SNT

Reputation: 1403

Highlight pie chart on hover d3js

I am trying to get a pie chart using d3js. As of now on hover the title works fine. I am also trying to increase the size of the selected pie on hover. Below is what I am doing on mousemove :

var arcOver = d3.arc()
    .innerRadius(0)
    .outerRadius(150 + 10);

.on("mousemove", function(d) {
    tooltip.transition().duration(200)
        .style("opacity", 0.9);
    tooltip.select("div").html(d.data.name + " <br><strong>" + d.data.value + "</strong>")
        .style("position", "fixed")
        .style("text-align", "center")
        .style("width", "120px")
        .style("height", "45px")
        .style("padding", "2px")
        .style("font", "12px sans-serif")
        .style("background", "lightsteelblue")
        .style("border", "0px")
        .style("border-radius", "8px")
        .style("left", (d3.event.pageX + 15) + "px")
        .style("top", (d3.event.pageY - 28) + "px");
    d3.select(this).transition()
        .duration(1000)
        .attr("g", arcOver);

})

Here is the link for the fiddle with the same code where the text display on hover works but not the size increase for the selected pie. How could I get both things for this purpose.Thank You.

https://jsfiddle.net/snt1/gLjjv5ch/3/

Upvotes: 1

Views: 4570

Answers (2)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

Right now your mousemove event is listening to a <g> element. However, the path is a child of a group element.

Therefore, use this combined with firstNode. Also, there is no "g" attribute for a path, but "d" instead:

d3.select(this.firstChild).transition()
    .attr("d", arcOver);

Here is your updated code:

var toCSV = [{
  "name": "SEASONAL_LYQ1",
  "code": "SEASONAL_LYQ1",
  "parent": "SEASONAL_POP",
  "value": "0",
  "label": "LYQ1",
  "children": []
}, {
  "name": "SEASONAL_LYQ2",
  "code": "SEASONAL_LYQ2",
  "parent": "SEASONAL_POP",
  "value": "10",
  "label": "LYQ2",
  "children": []
}, {
  "name": "SEASONAL_LYQ3",
  "code": "SEASONAL_LYQ3",
  "parent": "SEASONAL_POP",
  "value": "16",
  "label": "LYQ3",
  "children": []
}, {
  "name": "SEASONAL_LYQ4",
  "code": "SEASONAL_LYQ4",
  "parent": "SEASONAL_POP",
  "value": "10",
  "label": "LYQ4",
  "children": []
}, {
  "name": "SEASONAL_CYQ1",
  "code": "SEASONAL_CYQ1",
  "parent": "SEASONAL_POP",
  "value": "0",
  "label": "CYQ1",
  "children": []
}, {
  "name": "SEASONAL_CYQ2",
  "code": "SEASONAL_CYQ2",
  "parent": "SEASONAL_POP",
  "value": "10",
  "label": "CYQ2",
  "children": []
}, {
  "name": "SEASONAL_CYQ3",
  "code": "SEASONAL_CYQ3",
  "parent": "SEASONAL_POP",
  "value": "16",
  "label": "CYQ3",
  "children": []
}, {
  "name": "SEASONAL_CYQ4",
  "code": "SEASONAL_CYQ4",
  "parent": "SEASONAL_POP",
  "value": "10",
  "label": "CYQ4",
  "children": []
}];
var margin = {
    top: 30,
    right: 20,
    bottom: 20,
    left: 20
  },
  width = 400,
  height = 400;
var radius = Math.min(width, height) / 4;
var donutWidth = 75;
var color = d3.scaleOrdinal(d3.schemeCategory20);
var count = 0;
// var svg = d3.select("div#donuts").append("svg")
var svg = d3.select("#charts").append("svg")
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr('transform', 'translate(' + (width / 2) +
    ',' + (height / 2) + ')');


var arc = d3.arc()
  .innerRadius(0)
  .outerRadius(100);
//        var arc = d3.svg.arc().outerRadius(r);
var arcOver = d3.arc()
  .innerRadius(0)
  .outerRadius(150 + 10);

var pie = d3.pie()
  .sort(null)
  .value(function(d) {
    return d.value;
  });
var pcnt = d3.sum(toCSV, function(d) {
  return d.value;
});

// avoiding overlap labels
var getAngle = function(d) {
  return (180 / Math.PI * (d.startAngle + d.endAngle) / 2 - 90);
};
var g = svg.selectAll(".arc")
  .data(pie(toCSV))
  .enter().append("g")
  .attr('class', "arc")
  .on("mouseover", function() {
    tooltip.style("display", null);
  })
  .on("mousemove", function(d) {
    tooltip.transition().duration(200)
      .style("opacity", 0.9);
    tooltip.select("div").html(d.data.name + " <br><strong>" + d.data.value + "</strong>")
      .style("position", "fixed")
      .style("text-align", "center")
      .style("width", "120px")
      .style("height", "45px")
      .style("padding", "2px")
      .style("font", "12px sans-serif")
      .style("background", "lightsteelblue")
      .style("border", "0px")
      .style("border-radius", "8px")
      .style("left", (d3.event.pageX + 15) + "px")
      .style("top", (d3.event.pageY - 28) + "px");
    d3.select(this.firstChild).transition()
      .attr("d", arcOver);

  })
  .on("mouseout", function() {
    tooltip.style("display", "none")
    d3.select(this.firstChild).transition()
      .attr("d", arc)
      .attr("stroke", "none");
  })

/*   .on("mouseover", function(d) {
					         	            d3.select(this)
				         	                   .transition()
					         	               .duration(1000)
					         	               .attr("d", arcOver);
					         	        })
	         	        .on("mouseout", function(d) {
	         	            d3.select(this).transition()            
	         	               .attr("d", arc)
	         	               .attr("stroke","none");
	         	        });*/

var tooltip = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("opacity", 0.5);

tooltip.append("rect")
  .attr("width", 30)
  .attr("height", 20)
  .attr("fill", "#ffffff")
  .style("opacity", 0.5);

tooltip.append("div")
  .attr("x", 15)
  .attr("dy", "1.2em")
  .style("text-anchor", "middle")
  .attr("font-size", "1.5em")
  .attr("font-weight", "bold");



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

count = 0;
//Legend for charts 
var legend = svg.selectAll(".legend")
  .data(toCSV).enter()
  .append("g").attr("class", "legend")
  .attr("legend-id", function(d) {
    return count++;
  })
  .attr("transform", function(d, i) {
    return "translate(-30," + (-90 + i * 20) + ")";
  });


legend.append("rect")
  .attr("x", width / 1.9)
  .attr("word-wrap", "break-word")
  .attr("width", 18).attr("height", 18)
  .style("fill", function(d) {
    return color(d.name);
  });
legend.append("text").attr("x", width / 2)
  .attr("y", 9).attr("dy", ".35em")

  .style("text-anchor", "end").text(function(d) {
    return d.label;
  });
  .chart {
  background: #eee;
  padding: 3px;
}

.chart div {
  width: 0;
  transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
}

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 5px;
  color: white;
  box-shadow: 2px 2px 2px #666;
}

.bar {
  fill: orange;
}

.bar:hover {
  fill: red;
}

rect.background {
  fill: white;
}

.axis {
  shape-rendering: crispEdges;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
}

tooltip {
  position: absolute;
  text-align: center;
  width: 120px;
  height: 45px;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

bar {
  fill: #8CD3DD;
}

bar:hover {
  fill: #F56C4E;
}


/* .tick:nth-child(3n) text {
    visibility: hidden;
} */

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}


/* Creates a small triangle extender for the tooltip */

.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}


/* Style northward tooltips differently */

.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

Creates a small triangle extender for the tooltip .d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

Style northward tooltips differently .d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

svg text.label {
  fill: #ff0000;
  font: 25px;
  text-anchor: middle;
  font-weight: 400;
  text-anchor: middle;
  font-size: 125%;
  text-anchor: start;
}

path {
  stroke: steelblue;
  stroke-width: 2;
  /*   fill: none; */
  /* commenting out to show multiple ring donut chart. */
}

pathline {
  fill: none;
  stroke-width: 2;
  stroke: #000;
}

.axis path,
.axis line {
  fill: none;
  stroke: grey;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.graph {
  width: auto;
}

.tooltip {
  color: black;
}

.axis {
  font: 12px sans-serif, Georgia, Arial;
}

.axis path,
.axis line {
  fill: none;
  stroke: #dadada;
  shape-rendering: crispEdges;
}


/* ANGULAR MODAL */

.dialogdemoBasicUsage #popupContainer {
  position: relative;
}

.dialogdemoBasicUsage .footer {
  width: 100%;
  text-align: center;
  margin-left: 20px;
}

.dialogdemoBasicUsage .footer,
.dialogdemoBasicUsage .footer>code {
  font-size: 0.8em;
  margin-top: 50px;
}

.dialogdemoBasicUsage button {
  width: 200px;
}

.dialogdemoBasicUsage div#status {
  color: #c60008;
}

.dialogdemoBasicUsage .dialog-demo-prerendered md-checkbox {
  margin-bottom: 0;
}


/* Angular grids */

.gridListdemoBasicUsage md-grid-list {
  margin: 8px;
}

gridListdemoBasicUsage .gray {
  background: #f5f5f5;
}

.gridListdemoBasicUsage .green {
  background: #b9f6ca;
}

.gridListdemoBasicUsage .yellow {
  background: #ffff8d;
}

.gridListdemoBasicUsage .blue {
  background: #84ffff;
}

.gridListdemoBasicUsage .purple {
  background: #b388ff;
}

.gridListdemoBasicUsage .red {
  background: #ff8a80;
}

.gridListdemoBasicUsage md-grid-tile {
  transition: all 400ms ease-out 50ms;
}

md-grid-list md-grid-tile md-grid-tile-footer,
md-grid-list md-grid-tile md-grid-tile-header {
  height: 25px;
}

.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 12%;
  vertical-align: top;
  overflow: hidden;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.svg-content-responsive {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;
}

.svg-content {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

#linechart {
  width: 100%;
  height: 100%;
  position: absolute;
}


/* TESTING GRIDS */

.chart-tile {
  display: block;
  height: 100%;
  width: 100%;
}

.gridListdemoDynamicTiles .s64 {
  font-size: 64px;
}

.gridListdemoDynamicTiles .s32 {
  font-size: 48px;
}

.gridListdemoDynamicTiles md-grid-list {
  margin: 8px;
}

.gridListdemoDynamicTiles md-grid-tile {
  box-shadow: 2px 2px 3px 3px #888888;
  transition: all 300ms ease-out 50ms;
}

.gridListdemoDynamicTiles md-grid-tile md-grid-tile-footer {
  background: rgba(0, 0, 0, 0.68);
  height: 36px;
}

.gridListdemoDynamicTiles md-grid-tile-footer figcaption {
  width: 100%;
}

.gridListdemoDynamicTiles md-grid-tile-footer figcaption h3 {
  margin: 0;
  font-weight: 700;
  width: 100%;
  text-align: center;
}


/*
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at https://material.angularjs.org/license.
*/

@media (min-width: 1200px) {
  .container {
    width: 1400px;
    margin-right: -50px;
  }
}

@media only screen and (max-width: 260px) and (min-width: 1600px) {
  .container {
    width: 1700px;
    margin-right: -50px;
  }
}

#wrapper {
  border-style: solid;
  height: 100px;
  width: 200px;
}

#dropdown {
  vertical-align: middle;
  width: 80px;
  margin-left: 300px;
  margin-top: -30px;
}


/* Styles go here */

.gridster-item {
  background-color: darkgrey;
}

.my-class {
  border: 1px solid red;
  height: 50px;
}

body {
  background-color: #fcfcfc;
}

.container {
  text-align: center;
  padding: 15px;
}

.left-div {
  display: inline-block;
  max-width: 300px;
  text-align: left;
  padding: 30px;
  background-color: #ddd;
  border-radius: 3px;
  margin: 15px;
  vertical-align: top;
}

.right-div {
  display: inline-block;
  max-width: 150px;
  text-align: left;
  padding: 30px;
  background-color: #ddd;
  border-radius: 3px;
  margin: 15px;
}

.left-text,
.right-text {
  font: 300 16px/1.6 'Helvetica Neue' sans-serif;
  color: #333;
}

@media screen and (max-width: 600px) {
  .left-div,
  .right-div {
    max-width: 100%;
  }
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="charts"></div>

Upvotes: 3

Andrew Reid
Andrew Reid

Reputation: 38171

You need to update the d attribute of each pie segment on mouseover. However, you are trying to transition the parent g - this will not work.

Let's take a look at your code:

d3.select(this).transition()
  .duration(1000)
  .attr("g", arcOver);
})

What is this? this is the g, and while I assume that the .attr("g" is meant to be .attr("d" - neither will set the d attribute of the child path element (and a g doesn't have a d attribute to alter).

You'll need to select the child path element and then apply the new pathing data:

d3.select(this)      // make a selection of the parent g
  .select("path")    // select the child path element
  .transition()      // create a transition for the path
  .attr("d", arcOver)// update the path's d attribute
  .duration(1000);   // do it slowly.
})

With mouse out you'll need to reset the arc:

d3.select(this)      // make a selection of the parent g
  .select("path")    // select the child path element
  .transition()      // create a transition for the path
  .attr("d", arc)    // update the path's d attribute
  .duration(1000);   // do it slowly.
})

I've changed the trigger for the highlight to mouseover - you only need to call it once, when the mouse first enters the pie segment. Here's an updated fiddle.

Upvotes: 2

Related Questions