【发布时间】：2017-03-11 13:24:18
【问题描述】：
我有一个带有两条弧线的 d3 圆环图，主弧线边缘在鼠标悬停时将错误数据检索到 d 对象。其余弧中的所有区域在日志中显示正确的数据。
彩色区域的值为70，另一个弧为30。彩色主弧边显示第二个弧（30）的数据。
// data
var dataset = [{
color: "#5FC5EA",
value: 70
}, {
color: "transparent",
value: 30
}];
// size
var width = 460, z
height = 300,
radius = Math.min(width, height) / 2;
var pie = d3.layout.pie()
.sort(null).value(function(d) {
return d.value;
});
// thin arc
var arc1 = d3.svg.arc()
.innerRadius(radius - 20)
.outerRadius(radius - 11);
// main arc
var arc = d3.svg.arc()
.innerRadius(radius - 16)
.outerRadius(radius - 17);
// set svg
var svg = d3.select("#d3-setup-donut").append("svg")
.attr("class",'donut-chart')
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.on('mouseout', function() {
d3.selectAll('.donut-tooltip').style('display','none');
});
// tooltip
var div = d3.select("body")
.append("div")
.attr("class", "donut-tooltip");
// draw thinner arc
var path = svg.selectAll(".background")
.data(pie([{
color: "#222427",
value: 1
}]))
.enter().append("path")
.attr("class", "background")
.attr("fill", function(d, i) {
return d.data.color;
})
.attr("d", arc1)
.on('click', function(d, i) {
//
})
.on("mousemove",function(d, i) {
var mouseVal = d3.mouse(this);
div.style("display","none");
div.html(d.data.label+" : "+d.value)
.style("left", (d3.event.pageX-40) + "px")
.style("top", (d3.event.pageY-35) + "px")
.style("opacity", 1)
.style("display","block");
})
.on("mouseout",function(){
div.html(" ").style("display","none");
});
// draw main arc
var path = svg.selectAll(".foreground")
.data(pie(dataset))
.enter().append("path")
.attr("class", "foreground")
//.attr("stroke-linejoin", "round")
//.attr("stroke-linecap", "round")
.attr("stroke-width", "20")
.attr("stroke","none")
.attr("stroke", function(d, i) {
return d.data.color;
})
.attr("fill", "none")
.attr("d", arc)
.on('click', function(d, i) {
//
})
.on("mousemove",function(d, i) {
console.log(d)
var mouseVal = d3.mouse(this);
div.style("display","none");
div.html(d.data.label+" : "+d.value)
.style("left", (d3.event.pageX-40) + "px")
.style("top", (d3.event.pageY-35) + "px")
.style("opacity", 1)
.style("display","block");
})
.on("mouseout",function(){
div.html(" ").style("display","none");
});
// draw inner text
svg.append("text")
.text('60%')
.attr("class", "donut-inner-val")
//.attr("x", radius/12 - 30)
//.attr("y", radius/12 - 10);
svg.append("text")
.text('in progress')
.attr("class", "donut-inner-text")
.attr("x", (radius/12) - 35)
.attr("y", (radius/12) + 10);
【问题讨论】：
-
我没有关注这个。蓝色弧线有
70作为数据，工具提示显示70。这不正确吗？ -
@GerardoFurtado 将鼠标悬停在彩色弧线的边缘。它显示的是 30 而不是 70。这就是问题所在。
标签： javascript html css d3.js svg