d3輸入重置單選按鈕

Question

我有一個用d3創建的條形圖，只要有輸入就可以排序自己。我在網上找到了http://bl.ocks.org/mbostock/3885705。 它看起來像這樣：

var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
width = 960 - margin.left - margin.right, 
height = 500 - margin.top - margin.bottom; 

var formatPercent = d3.format(".0%"); 

var x = d3.scale.ordinal() 
.rangeRoundBands([0, width], .1, 1); 

var y = d3.scale.linear() 
.range([height, 0]); 

var xAxis = d3.svg.axis() 
.scale(x) 
.orient("bottom"); 

var yAxis = d3.svg.axis() 
.scale(y) 
.orient("left") 
.tickFormat(formatPercent); 

var svg = d3.select("body").append("svg") 
.attr("width", width + margin.left + margin.right) 
.attr("height", height + margin.top + margin.bottom) 
.append("g") 
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.tsv("data.tsv", function(error, data) { 

data.forEach(function(d) { 
d.frequency = +d.frequency; 
}); 

x.domain(data.map(function(d) { return d.letter; })); 
y.domain([0, d3.max(data, function(d) { return d.frequency; })]); 

svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
.append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text("Frequency"); 

svg.selectAll(".bar") 
    .data(data) 
.enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { return x(d.letter); }) 
    .attr("width", x.rangeBand()) 
    .attr("y", function(d) { return y(d.frequency); }) 
    .attr("height", function(d) { return height - y(d.frequency); }); 

d3.select("input").on("change", change); 

var sortTimeout = setTimeout(function() { 
d3.select("input").property("checked", true).each(change); 
}, 2000); 

function change() { 
clearTimeout(sortTimeout); 

// Copy-on-write since tweens are evaluated after a delay. 
var x0 = x.domain(data.sort(this.checked 
    ? function(a, b) { return b.frequency - a.frequency; } 
    : function(a, b) { return d3.ascending(a.letter, b.letter); }) 
    .map(function(d) { return d.letter; })) 
    .copy(); 

svg.selectAll(".bar") 
    .sort(function(a, b) { return x0(a.letter) - x0(b.letter); }); 

var transition = svg.transition().duration(750), 
    delay = function(d, i) { return i * 50; }; 

transition.selectAll(".bar") 
    .delay(delay) 
    .attr("x", function(d) { return x0(d.letter); }); 

transition.select(".x.axis") 
    .call(xAxis) 
    .selectAll("g") 
    .delay(delay); 
} 
}); 

我離開了CSS一部分，我不認爲它很重要。問題是，我也有多個單選按鈕像HTML：

<div> 
<input type="radio" name="radio" id="radio1" class="radio" onclick="radios('finance.csv')" /> 
<label for="radio1">Financial Situation</label> 
</div> 

每當酒吧排序本身，單選按鈕重新設置自己。所以我點擊一個單選按鈕。它被標記了幾秒鐘，然後它跳回到第一個單選按鈕。我猜想它因爲在「輸入」部分：

d3.select("input").on("change", change); 

var sortTimeout = setTimeout(function() { 
d3.select("input").property("checked", true).each(change); 
}, 2000); 

我怎樣才能防止無線電重置自己，但仍然有我的國家所輸入的變化排序？

在此先感謝！

Answer 1

.property可以被用作吸氣劑或吸氣劑。在這裏，你使用它作爲一個二傳手，所以當你：

d3.select("input").property("checked", true) 

你設置所有輸入進行檢查。由於只有一個單選按鈕被允許檢查，它會檢查第一個。

我沒有建立一個小提琴和測試的時間，但我相信只是用它作爲一個getter會修：

d3.select("input").property("checked").each(change); 

你也可能是您的選擇更精確：

d3.select("input[type=radio]:checked").each(change); 

如果您在頁面上的其他位置添加其他輸入，這樣做的好處是不會發生不可預測的情況。