Javascript 打开选择开关d3圆环弧
我的页面中有不止一个甜甜圈,每个甜甜圈都有一个较薄的部分(如未填充的部分)和另一个弧形部分 当用户单击彩色弧时,它应该有一个白色边框。如果用户选择其他圆弧(未填充),则未填充区域将填充颜色,并像其他圆弧一样更改宽度,并将具有边框,同时填充区域将被取消填充。为了总结,弧形部分应打开选择 我可以通过应用类/样式来实现这一点吗?在一个页面中,一次只能选择一个弧,所有其他选择都将被清除Javascript 打开选择开关d3圆环弧,javascript,css,html,d3.js,svg,Javascript,Css,Html,D3.js,Svg,我的页面中有不止一个甜甜圈,每个甜甜圈都有一个较薄的部分(如未填充的部分)和另一个弧形部分 当用户单击彩色弧时,它应该有一个白色边框。如果用户选择其他圆弧(未填充),则未填充区域将填充颜色,并像其他圆弧一样更改宽度,并将具有边框,同时填充区域将被取消填充。为了总结,弧形部分应打开选择 我可以通过应用类/样式来实现这一点吗?在一个页面中,一次只能选择一个弧,所有其他选择都将被清除 // data var dataset = [{ color: "#5FC5EA", value: 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 - 30)
.outerRadius(radius);
// 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("fill", function(d, i) {
return d.data.color;
})
.attr("d", arc)
.on('click', function(d, i) {
d3.select(this)
.classed('selected', true);
})
.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 - 55) + "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);
试试这段代码
.on('click', function(d, i) {
d3.selectAll(".foreground").classed('selected', false);
if(d3.select(this).classed("active")){
d3.select(this)
.classed('selected', true);
}else{
d3.selectAll(".foreground").classed("active", false);
d3.select(this).classed("active",true);
d3.select(this)
.classed('selected', true);
}
})
尽管这是一个很好的答案,但OP的代码或标记中没有jQuery。正如预期的那样,更新的jQuery通过应用css类来处理切换。完美的