Question

我在d3.js中使用此问题D3.js - Donut charts with multiple rings创建了一个多系列圆环图，请参阅下面的小提琴。

我希望能够添加悬停效果，并且还可以使每个部分都可以点击，我希望为图表的每个切片分配一个certin href。我已经四处看了一眼，但是我无法理解它 - 对我来说，d3.js对我来说非常复杂。

我现在的代码：http://jsfiddle.net/mephisto73/o6shxw0d/

＆＃13;

(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); });
});

＆＃13;

Answer 1

＆＃13;

$(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
});
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

我已经添加了mousemove，mouseout和click功能。尝试阅读并在点击功能中进行修改。希望你明白了，如果不是问我更多。

在d3.js中为多系列圆环图添加链接和悬停效果

1 个答案: