1
나는 클릭했을 때 time.scale의 최소값과 최대 값을 변경하는 3 개의 버튼이 있습니다.동일한 버튼을 클릭 할 때 강제로 애니메이션 전환
전환 효과는 좋지만 사용자가 동일한 버튼을 클릭 할 때 크기가 변경되지 않았더라도 전환 애니메이션을 강제 실행하려고합니다.
이
업데이트 코드입니다 : 내가 애니메이션, 때 같은 버튼을 다시 클릭을 강제[minDate, minDate]에 축척을 변경하는 어쩌면 생각
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);
}
하지만, 그렇지 않습니다.
같은 버튼을 다시 클릭 할 때 애니메이션을 강제로 움직이게 할 수 있습니까?
근무 예 : 첫 번째 전환은 2 전이를 호출하는 콜백을 수 있도록
<!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