CODEWITHSUNDEEP
d3.js
mephisto73
mephisto73

Reputation: 98

Add links and hover effects to multi series donut chart in d3.js

I have a multi series donut chart created with the help of this question D3.js - Donut charts with multiple rings in d3.js, see fiddle below.

I'd like to be able to add hover effects, and also make each part clickable in the sense I'd like to assign a certin href to each slice of the chart. I have looked around quite a bit, but can't get my head around it - d3.js is quite complex for me I guess.

The code I have now: http://jsfiddle.net/mephisto73/o6shxw0d/

(function(){
var $container = $('.chart-container'),
        τ = 2 * Math.PI,
        width = $container.width(),
        height = $container.height(),
        outerRadius = Math.min(width,height)/2.5,
        innerRadius = (outerRadius/5)*4,
        fontSize = (Math.min(width,height)/4);

var dataset = {
  weeks: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    months: [1,1,1,1,1,1,1,1,1],
    trimester: [1,1,1]
};


var color = d3.scale.ordinal()    .range(['rgba(141,211,199,0.8)','rgb(255,255,179)','rgb(190,186,218)','rgb(251,128,114)','rgb(128,177,211)','rgb(253,180,98)','rgb(179,222,105)','rgb(252,205,229)','rgb(217,217,217)','rgb(188,128,189)','rgb(204,235,197)','rgb(255,237,111)']);

var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc();

var svg = d3.select('.chart-container').append("svg")
        .attr("width", '100%')
        .attr("height", '100%')
        .attr('viewBox','0 0 '+Math.min(width,height) +' '+Math.min(width,height) )
        .attr('preserveAspectRatio','xMinYMin')
        .append("g")
        .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");

var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g").attr("class", "arc");
    
var path = gs.selectAll("path")
    .data(function(d) { return pie(d); })
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", function(d, i, j) { return arc.innerRadius(innerRadius+(40*j)).outerRadius(innerRadius+(5*(j+5)))(d); });
});

Upvotes: 1

Views: 1355

Answers (1)

saikiran.vsk
saikiran.vsk

Reputation: 1796

$(function(){
    var tooltip = d3.select(".tooltip");
var $container = $('.chart-container'),
        τ = 2 * Math.PI,
        width = $container.width(),
        height = $container.height(),
        outerRadius = Math.min(width,height)/2.5,
        innerRadius = (outerRadius/5)*4,
        fontSize = (Math.min(width,height)/4);

var dataset = {
  weeks: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    months: [1,1,1,1,1,1,1,1,1],
    trimester: [1,1,1]
};


var color = d3.scale.ordinal()    .range(['rgba(141,211,199,0.8)','rgb(255,255,179)','rgb(190,186,218)','rgb(251,128,114)','rgb(128,177,211)','rgb(253,180,98)','rgb(179,222,105)','rgb(252,205,229)','rgb(217,217,217)','rgb(188,128,189)','rgb(204,235,197)','rgb(255,237,111)']);

var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc();

var svg = d3.select('.chart-container').append("svg")
        .attr("width", '100%')
        .attr("height", '100%')
        .attr('viewBox','0 0 '+Math.min(width,height) +' '+Math.min(width,height) )
        .attr('preserveAspectRatio','xMinYMin')
        .append("g")
        .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");

var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g").attr("class", "arc");
    
var path = gs.selectAll("path")
    .data(function(d) { return pie(d); })
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", function(d, i, j) { return arc.innerRadius(innerRadius+(40*j)).outerRadius(innerRadius+(5*(j+5)))(d); })
.on("mousemove", function(d){
    tooltip.style("left", d3.event.pageX+10+"px");
     tooltip.style("top", d3.event.pageY-25+"px");
     tooltip.style("display", "inline-block");
    
    tooltip.select("span").text("Value: "+d.value);
}).on("mouseout",function(){
    tooltip.style("display","none");
}).on("click",function(){
    //write code to open
});
});
html,body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 margin:0;
  padding:0;
  width:100%;
  height:100%;
}

text {
  font: 10px sans-serif;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

.arc path {
  stroke: #fff;
  width:5px;  
}

.arc path:hover {
    background-color:#ccc;
    
}

.chart-container {
  width:70%;
  height:70%;
  border: 1px dotted silver;
}

svg text{
font-size: 1em;
font-family: sans-serif;
}

.tooltip{
    position: absolute;
    display: none;
    width: auto;
    height: auto;
    background: none repeat scroll 0 0 white;
    border: 0 none;
    border-radius: 8px 8px 8px 8px;
    box-shadow: -3px 3px 15px #888888;
    color: black;
    font: 12px sans-serif;
    padding: 5px;
    text-align: center;
    
}

path:hover{
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>
<div class="chart-container"></div>
<div class='tooltip'>
    <span></span>
</div>

I've added functionality for on mousemove, mouseout and click. Try to read and do the modification in click function. Hope you got it,If not ask me for more.

Upvotes: 3

Related Questions