Javascript d3圆环图arc检索错误数据

我有一个d3甜甜圈图表，有两条弧，主弧边在鼠标上方的

d

对象中检索错误数据。弧中的所有休息区域在日志中显示正确的数据

彩色区域的值为

70

，另一个弧的值为

30

。彩色主弧边显示第二弧（30）的数据

---

您的问题是由

笔划宽度

属性引起的。这样做的结果是：笔划宽度不仅向弧的侧面添加像素，还向弧的末端添加像素

我们可以在下面的演示中看到这一点，放大笔划宽度并为透明路径着色（我还更改了不透明度，因此您可以看到每个路径的终点）：

//数据
变量数据集=[{
颜色：“5FC5EA”，
价值：70
}, {
颜色：“红色”，
价值：30
}];
//大小
可变宽度=460，
Z
高度=300，
半径=数学最小值（宽度、高度）/2；
var pie=d3.layout.pie（）
.sort（null）.value（函数（d）{
返回d值；
});
//薄弧
var arc1=d3.svg.arc（）
.内半径（半径-20）
.外层（半径-11）；
//主弧
var arc=d3.svg.arc（）
.内半径（半径-16）
.外层（半径-17）；
//设置svg
var svg=d3。选择（“d3设置甜甜圈”）。追加（“svg”）
.attr（“类”，“甜甜圈图表”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（“+width/2+”，“+height/2+”）
.on（'mouseout'，function（）{
d3.选择全部（'.donut工具提示'）.style（'display'，'none'）；
});
//工具提示
var div=d3。选择（“主体”）
.附加（“div”）
.attr（“类”、“甜甜圈工具提示”）；
//画细弧
var path=svg.selectAll（“.background”）
.数据（pie）([{
颜色：“222427”，
价值：1
}]))
.enter（）.append（“路径”）
.attr（“类别”、“背景”）
.attr（“填充”，函数（d，i）{
返回d.data.color；
})
.attr（“d”，arc1）
.on（'click'，函数（d，i）{
//
})
.on（“mousemove”，函数（d，i）{
var mouseVal=d3.mouse（this）；
分区样式（“显示”、“无”）；
div.html（d.data.label+“：”+d.value）
.style（“左”（d3.event.pageX-40）+“px”）
.style（“顶部”（d3.event.pageY-35）+“px”）
.style（“不透明度”，1）
.样式（“显示”、“块”）；
})
.on（“mouseout”，函数（）{
div.html（“”）样式（“显示”、“无”）；
});
//画主弧
var path=svg.selectAll（“.foreground”）
.数据（饼图（数据集））
.enter（）.append（“路径”）
.attr（“类”、“前景”）
//.attr（“笔划线条连接”、“圆形”）
//.attr（“笔划线头”、“圆形”）
.attr（“笔划宽度”（d，i）=>60-i*10）
.attr（“不透明度”（d，i）=>1-i*0.2）
.attr（“笔划”、“无”）
.attr（“笔划”，功能（d，i）{
返回d.data.color；
})
.attr（“填充”、“无”）
.attr（“d”，弧）
.on（'click'，函数（d，i）{
//
})
.on（“mousemove”，函数（d，i）{
var mouseVal=d3.mouse（this）；
分区样式（“显示”、“无”）；
div.html（d.data.label+“：”+d.value）
.style（“左”（d3.event.pageX-40）+“px”）
.style（“top”，（d3.event.pageY-55）+“px”）
.style（“不透明度”，1）
.样式（“显示”、“块”）；
})
.on（“mouseout”，函数（）{
div.html（“”）样式（“显示”、“无”）；
});
//绘制内部文本
svg.append（“文本”）
.text（'60%”）
.attr（“类”、“甜甜圈内部值”）
//.attr（“x”，半径/12-30）
//.attr（“y”，半径/12-10）；
svg.append（“文本”）
.text（“正在进行中”）
.attr（“类”、“甜甜圈内部文本”）
.attr（“x”，（半径/12）-35）
.attr（“y”，（半径/12）+10）
$淡蓝色：#f6f8fe；
$dark two:#253644；
$浅灰色：#f0f4f7；
$font roman:'Helvetica LT W01 roman'；
$font light:“Helvetica LT W01 light”；
$font bold:'Helvetica LT W01 bold'；
身体{
背景色：#25333F；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
}
.甜甜圈内胆{
文本锚定：中间；
字体系列：$font light；
字体大小：24px；
填充：$浅蓝色；
}
.donut内部文本{
字体系列：$font light；
字体大小：10px；
填充：$浅蓝色；
}
.背景{
z指数：1；
}
.前景{
z指数：2；
}
.前景，.背景{
光标：指针；
}
.donut工具提示{
线高：1；
字体大小：正常；
填充：10px 5px；
背景：#ccc；
边框颜色：#ccc；
//不透明度：.5；
颜色：#333；
边界半径：2px；
字体大小：11px；
位置：绝对位置；
文本对齐：居中；
高度：28px；
不透明度：0；
z指数：99999；
}

我不明白这一点。蓝色弧将
70
作为数据，工具提示显示
70
。是不是这样？@GerardoFurtado鼠标越过彩色弧的边缘。它显示的是30而不是70。这就是问题所在。太好了！谢谢你的详细解释。
// 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);