对于以下内容，我很高兴组合框默认为世界 - 但当 radio 被点击时，我也希望标题移回“世界” - 我该怎么做？
我有这个笨蛋:http://plnkr.co/edit/9FXJXVqLZLPFdDrmVJez?p=preview
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>comboBoxWithRadios</title>
<script src="https://d3js.org/d3.v3.js"></script>
<style type="text/css">
#projection-menu {
position: absolute;
left: 15px;
top: 45px;
}
#comboSelection {
position: absolute;
left: 15px;
top: 95px;
}
</style>
</head>
<body>
<div id="radioDiv">
<label>
<input type="radio" name="dataset" id="dataset" value="XXX"> XXX</label>
<label>
<input type="radio" name="dataset" id="dataset" value="YYY" checked> YYY</label>
<label>
<input type="radio" name="dataset" id="dataset" value="ZZZ">ZZZ</label>
</div>
<div id="comboSelection"></div>
<select id="projection-menu"></select>
<script type="text/javascript">
d3.select("input[value=\"YYY\"]").property("checked", true);
var exampleCSV = "comboBoxWithRadios.csv"
selectDataset();
d3.selectAll("input")
.on("change", selectDataset);
function selectDataset() {
var v = this.value;
if (undefined == v) {
v = "YYY"
}
d3.csv(exampleCSV, function(rows) {
dta = rows.filter(function(row) {
if (row['Category'] == v) {
return true;
}
});
//clear out the combobox
removeOptions(document.getElementById("projection-menu"));
var menu = d3.select("#projection-menu")
.on("change", addProdTitl);
console.log(d3.map(dta, function(d) {
return d.country;
}))
menu.selectAll("option")
.data(d3.map(dta, function(d) {
return d.country;
}).keys())
.enter()
.append("option")
.property("selected", function(d) {
return d === "world";
})
.text(function(d) {
return d;
});
});
};
function removeOptions(selectbox) {
var i;
for (i = selectbox.options.length - 1; i >= 0; i--) {
selectbox.remove(i);
}
}
function addProdTitl() {
var combSel = this.value;
// console.log(width)
if (d3.select("#prodTitle").empty()) {
var svg = d3.select("#comboSelection")
.append("svg")
.attr({
"width": "100%",
"height": "70px",
id: "prodTitle"
});
} else {
var svg = d3.select("#prodTitle");
svg.selectAll("*").remove();
}
var svgG = svg
.append("g")
.attr({
"transform": "translate(" + 25 + "," + 5 + ")",
"width": "700px",
"height": 100,
id: "svgGxxx"
});
svgG
.append("rect")
.attr({
"transform": "translate(5,15)",
x: 30,
y: 0,
"width": "675",
"height": "3",
"fill": "#00a5b6"
})
.transition()
.duration(1400)
.attr({
"transform": "translate(5,20)"
});
svgG
.append("text")
.text(combSel)
.attr({
"x": 60,
"y": 10,
"fill": "#00a5b6"
})
.transition()
.duration(1400)
.attr({
"y": 15
});
};
</script>
</body>
</html>
最佳答案
我的解决方案涉及将参数传递给函数addProdTitl:
var menu = d3.select("#projection-menu")
.on("change", function(){
var thisvalue = this.value;
addProdTitl(thisvalue);
});
因此，我们可以将函数重写为:
function addProdTitl(thisvalue) {
var combSel = thisvalue;
//the rest of the function.
这样，每次更换 radio 时，只需执行以下操作:
if (!d3.select("#prodTitle").empty()){
addProdTitl("world");
}
关于javascript - 为什么这个标题图形不随世界更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41020467/