1
私は、クリックするとtime.scaleの最小値と最大値を変更する3つのボタンがあります。同じボタンをクリックしたときにアニメーションを強制的に実行する
トランジションはうまく動作しますが、スケールが変更されていない場合でもユーザーが同じボタンをクリックしてもトランジションアニメーションを強制的に実行しようとしています。
これは、更新コードです：
function updateAxis(grp) {
console.log(grp);
var parsedDts = grp.map(function(d) {
return parseDate(d);
});
var minDate = d3.min(parsedDts),
maxDate = d3.max(parsedDts);
var plotJ = d3.select("#yAxisG")
//>> using [minDate, minDate] to try to force a transition even when clicking the same square
var x = d3.time.scale().domain([minDate, minDate]).range([0, 800]);
var axisY = d3.svg.axis()
.orient('bottom')
.scale(x);
plotJ.transition().delay(2000).call(axisY);
var x = d3.time.scale().domain([minDate, maxDate]).range([0, 800]);
var axisY = d3.svg.axis()
.orient('bottom')
.scale(x);
plotJ.transition().duration(2000).call(axisY);
}
私は同じボタンを再度クリックすると、アニメーションを強制する[minDate, minDate]にスケールを変更するかもしれないと思ったが、それはしません。
同じボタンを再度クリックすると、アニメーションを強制することはできますか？
の作業例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Axis Testing</title>
<script src="https://d3js.org/d3.v2.js"></script>
<style type="text/css">
#threeSquares {
position: absolute;
top: 10px;
left: 10px;
width: 70px;
height: 250px;
}
#barChart {
position: absolute;
top: 10px;
left: 80px;
height: 250px;
}
</style>
</head>
<body>
<div id="threeSquares"></div>
<div id="barChart"></div>
<script type="text/javascript">
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 getdta() {
return {
'label': ['year', 'day', 'month'],
'dts': [
['1/1/2016', '1/1/2017'],
['1/1/2016', '2/1/2016'],
['1/1/2016', '1/2/2016', '1/3/2016']
]
};
};
var parseDate = d3.time.format("%d/%m/%Y").parse;
//############# SQUARES ###################
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();
updateAxis(dta.dts[i]);
}
}
function addAxis() {
var basics = squaresBasics();
var margin = basics.margin,
width = basics.width,
height = basics.height;
var dta = getdta();
var dates = dta.dts[0];
var parsedDts = dates.map(function(d) {
return parseDate(d);
});
//console.log(d3.min(amounts));
var minDate = d3.min(parsedDts),
maxDate = d3.max(parsedDts);
//console.log(minDate, maxDate)
var svg = d3.select("#barChart")
.append("svg")
.attr({
"width": 1000,
"height": 500,
id: "barChartPlot"
});
var x = d3.time.scale().domain([minDate, maxDate]).range([0, 800]);
//console.log(x(new Date(2017, 7, 1)))
//console.log(dta.dts.length)
// console.log((margin.left - axisPadding), (margin.top + height));
var axisPadding = 2;
var leftAxisGroup = svg
.append('g')
.attr({
transform: 'translate(' + ((margin.left + 15) - axisPadding) + ',' + (margin.top + height) + ')',
id: "yAxisG"
});
var axisY = d3.svg.axis()
.orient('bottom').scale(x);
leftAxisGroup.call(axisY);
}
function updateAxis(grp) {
console.log(grp);
var parsedDts = grp.map(function(d) {
return parseDate(d);
});
var minDate = d3.min(parsedDts),
maxDate = d3.max(parsedDts);
var plotJ = d3.select("#yAxisG")
//>> using [minDate, minDate] to try to force a transition even when clicking the same square
var x = d3.time.scale().domain([minDate, minDate]).range([0, 800]);
var axisY = d3.svg.axis()
.orient('bottom')
.scale(x);
plotJ.transition().delay(2000).call(axisY);
var x = d3.time.scale().domain([minDate, maxDate]).range([0, 800]);
var axisY = d3.svg.axis()
.orient('bottom')
.scale(x);
plotJ.transition().duration(2000).call(axisY);
}
addSquares();
addAxis();
</script>
</body>
</html>
</body>
</html>
それはあなたがそれをに移行する値ですでにだ場合、どのような推移は次のようになりますか？ – Mark
@マーク日付は何も変わらないようにしたいので（スケール[minDate、minDate]）、以前の位置（同じ位置）に戻してください – whytheq