-1
爲什麼以下單選按鈕不可點擊？那麼，如果我點擊未經檢查的一個，它不會被檢查。看似鎖定的單選按鈕
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Testing Pie Chart</title>
<script src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
.clickBut {
font-family: verdana;
font-size: 9px;
font-weight: bold;
background-color: #ffa500 !important;
border-radius: 100px;
shape-rendering: crispEdges;
}
#controlDiv {
position: absolute;
top: 15px;
left: 10px;
width: 750px;
height: 35px;
}
#prodTitle {
position: absolute;
top: 60px;
left: 90px;
width: 750px;
height: 35px;
}
#threeSquares {
position: absolute;
top: 70px;
left: 10px;
width: 70px;
height: 250px;
}
.slice {
font-size: 12pt;
font-family: Verdana;
fill: white;
font-weight: bold;
}
.line {
fill: none;
stroke-width: 3px;
}
.title {
font-family: Verdana;
font-size: 11px;
font-weight: bold;
}
.yAxis text,
.xAxis text {
font: 7pt Verdana;
stroke: none;
fill: black;
}
.axis--y path,
.axis--x path {
display: none;
}
.axis--x line,
.axis--y line {
stroke: black;
fill: none;
stroke-width: 2px
}
.axis--y line {
stroke-width: 1px
}
.bar:hover {
fill: orange;
}
.d3-tip {
line-height: 1;
font-size: 10px;
padding: 10px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
border-radius: 2px;
}
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
</head>
<body>
<div id="controlDiv" style="text-align:left">
<label>
<input type="radio" name="mode" value="rev" onclick="xxx();">
REV
</label>
<label>
<input type="radio" name="mode" value="cnt" onclick="xxx();" checked>
CNT
</label>
</div>
<div id="controlDiv"></div>
<div id="threeSquares"></div>
<div id="prodTitle"></div>
<script type="text/javascript">
var parseDate = d3.time.format("%d/%m/%Y").parse;
addSquares();
addProdTitl();
//############# SQUARES ###################
function getdta() {
return {
'label': ['N', 'P', 'B'],
'col': ['#2bc896', '#FFA500', '#000']
};
};
function squaresBasics() {
var margin = {
top: 35,
right: 5,
bottom: 5,
left: 5
},
width = 70 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
return {
margin: margin,
width: width,
height: height
};
}
function addSquares() {
var dta = getdta();
var basics = squaresBasics();
var margin = basics.margin,
width = basics.width,
height = basics.height;
//Create SVG element
var SQsvg = d3.select("#threeSquares")
.append("svg")
.attr({
"width": width + margin.left + margin.right,
"height": height + margin.top + margin.bottom,
id: "squaresArea"
});
var SQg = SQsvg
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
SQg.selectAll("rect")
.data(dta.label)
.enter()
.append("rect")
.attr({
x: margin.left,
y: function(d, i) {
return i * 65
},
"width": width,
"height": 50,
fill: "blue"
})
.on("click", up);
SQg.selectAll("text")
.data(dta.label)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr({
x: margin.left,
y: function(d, i) {
return i * 65 + 20;
},
"font-family": "sans-serif",
"font-size": "15px",
fill: "white"
})
.on("click", up);
function up(d, i) {
//update bar chart when user selects a square
var dta = getdta();
// updateTitle(dta.label[i]);
updateTitle(d, dta.col[i]);
}
}
// ###########################################
function prodTitlBasics() {
var margin = {
top: 2,
right: 2,
bottom: 2,
left: 70
},
width = 700,
height = 35;
return {
margin: margin,
width: width,
height: height
};
}
function addProdTitl() {
var basics = prodTitlBasics();
var margin = basics.margin,
width = 700 - margin.left - margin.right,
height = basics.height;
console.log(width)
var svg = d3.select("#prodTitle")
.append("svg")
.attr({
"width": "100%",
"height": "60",
x: 70
});
var svgG = svg
.append("g")
.attr({
"transform": "translate(" + margin.left + "," + 25 + ")",
id: "svgGxxx"
});
svgG.append("rect")
.attr({
"transform": "translate(0,2)"
})
.attr({
x: 25, //margin.left,
y: 25, //margin.top,
width: 700, //width,
height: 5, //20,
fill: "#2bc896"
})
svgG.append("text")
.text("XXXXXXXXXXXXXX")
.attr({
x: 25, //margin.left,
y: 25, //height, //margin.top,// + 12,
"font-family": "sans-serif",
"font-size": "13px",
"font-weight": "bold",
fill: "#2bc896"
})
}
function updateTitle(x, c) {
console.log(x)
var svg = d3.select("#svgGxxx")
var t = svg.transition()
.duration(1400);
t.selectAll("text").text(x)
.attr({
fill: c
})
t.selectAll("rect")
.attr({
fill: c
})
}
function xxx(){
console.log("hello world")
}
</script>
</body>
</html>
controlDiv放置在單選按鈕的頂部。 – HaukurHaf