为什么这个标题图形不更新与世界 [英] Why does this title graphic not update with World
问题描述
对于以下内容，我很高兴组合框默认为世界 - 但是当一个收音机打了我也想标题移回到世界 - 我该怎么办？
For the following I am happy that the combobox is defaulting to world - but when a radio is hit I'd also like the title to move back to "world" - how do I do this?
我有这个plunk： http://plnkr.co/编辑/ 9FXJXVqLZLPFdDrmVJez？p =预览
I have this plunk: 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>
推荐答案
我的解决方案涉及传递一个参数到< c $ c> addProdTitl ：
My solution involves passing an argument to the function addProdTitl:
var menu = d3.select("#projection-menu")
.on("change", function(){
var thisvalue = this.value;
addProdTitl(thisvalue);
});
因此，我们可以将函数重写为：
So, we can rewrite the function as:
function addProdTitl(thisvalue) {
var combSel = thisvalue;
//the rest of the function.
这样，每次更换收音机时，只需执行：
That way, everytime you change the radio, just do:
if (!d3.select("#prodTitle").empty()){
addProdTitl("world");
}
这里是plunker： http://plnkr.co/edit/VvjHHp6KZrypwc9ApSPN?p=preview
Here is the plunker: http://plnkr.co/edit/VvjHHp6KZrypwc9ApSPN?p=preview
这篇关于为什么这个标题图形不更新与世界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
