Javascript D3饼图更新,IV-in-while循环工作不正常-为什么?
我第一次使用D3库,基本上也使用javascript,我需要一些帮助 当mysql查询为true时,我想在while循环中创建这个漂亮的饼图。它起作用了。它制作了三个饼图以及与无线电输入相关的表格。但在此之后,当我想切换单选按钮值时,只有最后一个饼图有效。当我激活未选中单选按钮时,其他两个饼图不会切换其值 我该怎么办Javascript D3饼图更新,IV-in-while循环工作不正常-为什么?,javascript,d3.js,charts,Javascript,D3.js,Charts,我第一次使用D3库,基本上也使用javascript,我需要一些帮助 当mysql查询为true时,我想在while循环中创建这个漂亮的饼图。它起作用了。它制作了三个饼图以及与无线电输入相关的表格。但在此之后,当我想切换单选按钮值时,只有最后一个饼图有效。当我激活未选中单选按钮时,其他两个饼图不会切换其值 我该怎么办 <?php $gem_stud_data = $db->prepare("SELECT * FROM ergebnisse WHERE studiengang
<?php
$gem_stud_data = $db->prepare("SELECT * FROM ergebnisse WHERE studiengang_1 <> 0 AND studiengang_2 <> 0 AND semester_id=1");
$gem_stud_data->execute();
if($_GET["id"] == 1){
while($gem_stud_datas = $gem_stud_data->fetch()){
$stud1_data = $db->prepare("SELECT * FROM studiengaenge WHERE id=:eins");
$stud1_data->bindParam(":eins", $gem_stud_datas["studiengang_1"]);
$stud1_data->execute();
$stud1_datas = $stud1_data->fetch();
$stud2_data = $db->prepare("SELECT * FROM studiengaenge WHERE id=:eins");
$stud2_data->bindParam(":eins", $gem_stud_datas["studiengang_2"]);
$stud2_data->execute();
$stud2_datas = $stud2_data->fetch();
?>
<form>
<label><input type="radio" name="dataset" value="stud_1" checked> <?php echo $stud1_datas["kuerzel"]; ?></label>
<label><input type="radio" name="dataset" value="stud_2"> <?php echo $stud2_datas["kuerzel"]; ?></label>
</form>
<script>
var dataset = {
stud_1: [53245, 28479, 19697, 24037, 40245],
stud_2: [200, 200, 200, 200]
};
var width = 960,
height = 500,
radius = Math.min(width, height) / 2;
var enterClockwise = {
startAngle: 0,
endAngle: 0
};
var enterAntiClockwise = {
startAngle: Math.PI * 2,
endAngle: Math.PI * 2
};
var color = d3.scale.category20();
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc()
.innerRadius(radius - 100)
.outerRadius(radius - 20);
var svg = d3.select("main").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
// set the start and end angles to 0 so we can transition
// clockwise to the actual values later
var path = svg.selectAll("path")
.data(pie(dataset.stud_1))
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc(enterClockwise))
.each(function(d) {
this._current = {
data: d.data,
value: d.value,
startAngle: enterClockwise.startAngle,
endAngle: enterClockwise.endAngle
}
}); // store the initial values
path.transition() // update
.duration(750)
.attrTween("d", arcTween);
d3.selectAll("input").on("change", change);
var timeout = setTimeout(function() {
d3.select("input[value=\"stud_2\"]").property("checked", true).each(change);
}, 2000);
function change() {
clearTimeout(timeout);
path = path.data(pie(dataset[this.value])); // update the data
// set the start and end angles to Math.PI * 2 so we can transition
// anticlockwise to the actual values later
path.enter().append("path")
.attr("fill", function (d, i) {
return color(i);
})
.attr("d", arc(enterAntiClockwise))
.each(function (d) {
this._current = {
data: d.data,
value: d.value,
startAngle: enterAntiClockwise.startAngle,
endAngle: enterAntiClockwise.endAngle
};
}); // store the initial values
path.exit()
.transition()
.duration(750)
.attrTween('d', arcTweenOut)
.remove() // now remove the exiting arcs
path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
}
// Store the displayed angles in _current.
// Then, interpolate from _current to the new angles.
// During the transition, _current is updated in-place by d3.interpolate.
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) {
return arc(i(t));
};
}
function arcTweenOut(a) {
var i = d3.interpolate(this._current, {startAngle: Math.PI * 2, endAngle: Math.PI * 2, value: 0});
this._current = i(0);
return function (t) {
return arc(i(t));
};
}
</script>
<?php
}
} ?>
变量数据集={
螺柱1:[5324528479196972403740245],
螺柱2:[200200200200200]
};
可变宽度=960,
高度=500,
半径=数学最小值(宽度、高度)/2;
var={
startAngle:0,
端角:0
};
逆时针方向的var={
startAngle:Math.PI*2,
endAngle:Math.PI*2
};
var color=d3.scale.category20();
var pie=d3.layout.pie()
.sort(空);
var arc=d3.svg.arc()
.内半径(半径-100)
.外层(半径-20);
var svg=d3.选择(“主”).追加(“svg”)
.attr(“宽度”,宽度)
.attr(“高度”,高度)
.附加(“g”)
.attr(“变换”、“平移”(+width/2+)、“+height/2+”);
//将开始和结束角度设置为0,以便进行过渡
//以后按顺时针方向调整到实际值
var path=svg.selectAll(“路径”)
.数据(pie(数据集.stud_1))
.enter().append(“路径”)
.attr(“fill”,函数(d,i){返回颜色(i);})
.attr(“d”,弧(顺时针)
.每个功能(d){
这是当前的{
数据:d.data,
价值:d.价值,
startAngle:enter顺时针。startAngle,
endAngle:按顺时针方向输入。endAngle
}
}); // 存储初始值
path.transition()//更新
.持续时间(750)
.attrTween(“d”,arcTween);
d3.选择全部(“输入”)。打开(“更改”,更改);
var timeout=setTimeout(函数(){
d3.选择(“输入[值=\“螺柱2\”]”)。属性(“选中”,为真)。每个(更改);
}, 2000);
函数更改(){
clearTimeout(超时);
path=path.data(pie(数据集[this.value]);//更新数据
//将开始和结束角度设置为Math.PI*2,以便我们可以过渡
//以后按逆时针方向调整到实际值
path.enter().append(“路径”)
.attr(“填充”,函数(d,i){
返回颜色(i);
})
.attr(“d”,弧(逆时针)
.每个功能(d){
这是当前的{
数据:d.data,
价值:d.价值,
startAngle:逆时针进入。startAngle,
endAngle:逆时针输入。endAngle
};
});//存储初始值
path.exit()
.transition()
.持续时间(750)
.attrTween('d',arcTweenOut)
.remove()//现在删除退出的弧
path.transition().duration(750).attrTween(“d”,arcTween);//重新绘制圆弧
}
//将显示的角度存储在_current中。
//然后,从_current插值到新角度。
//在转换过程中,_电流通过d3.interpolate就地更新。
函数arcTween(a){
var i=d3.内插(该电流为a);
该电流=i(0);
返回函数(t){
返回弧(i(t));
};
}
函数arcTweenOut(a){
var i=d3.interpolate(this._current,{startAngle:Math.PI*2,endAngle:Math.PI*2,value:0});
该电流=i(0);
返回函数(t){
返回弧(i(t));
};
}
我真的希望你能帮助我!我很沮丧:(
我提前向您表示感谢!请参见下文,这对我有效,并更改了您创建的超时数据
<form>
<label><input type="radio" name="dataset" value="stud_1" checked> Option 1 </label>
<label><input type="radio" name="dataset" value="stud_2"> Option 2 </label>
</form>
<script>
var dataset = {
stud_1: [53245, 28479, 19697, 24037, 40245],
stud_2: [200, 200, 200, 200]
};
var width = 960,
height = 500,
radius = Math.min(width, height) / 2;
var enterClockwise = {
startAngle: 0,
endAngle: 0
};
var enterAntiClockwise = {
startAngle: Math.PI * 2,
endAngle: Math.PI * 2
};
var color = d3.scale.category20();
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc()
.innerRadius(radius - 100)
.outerRadius(radius - 20);
var svg = d3.select("#main").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
// set the start and end angles to 0 so we can transition
// clockwise to the actual values later
var path = svg.selectAll("path")
.data(pie(dataset.stud_1))
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc(enterClockwise))
.each(function(d) {
this._current = {
data: d.data,
value: d.value,
startAngle: enterClockwise.startAngle,
endAngle: enterClockwise.endAngle
}
}); // store the initial values
path.transition() // update
.duration(750)
.attrTween("d", arcTween);
d3.selectAll("input").on("change", change);
var timeout = setTimeout(function() {
d3.select("input[value=\"stud_2\"]").property("checked", true).each(change);
}, 2000);
function change() {
clearTimeout(timeout);
path = path.data(pie(dataset[this.value])); // update the data
// set the start and end angles to Math.PI * 2 so we can transition
// anticlockwise to the actual values later
path.enter().append("path")
.attr("fill", function (d, i) {
return color(i);
})
.attr("d", arc(enterAntiClockwise))
.each(function (d) {
this._current = {
data: d.data,
value: d.value,
startAngle: enterAntiClockwise.startAngle,
endAngle: enterAntiClockwise.endAngle
};
}); // store the initial values
path.exit()
.transition()
.duration(750)
.attrTween('d', arcTweenOut)
.remove() // now remove the exiting arcs
path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
}
// Store the displayed angles in _current.
// Then, interpolate from _current to the new angles.
// During the transition, _current is updated in-place by d3.interpolate.
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) {
return arc(i(t));
};
}
function arcTweenOut(a) {
var i = d3.interpolate(this._current, {startAngle: Math.PI * 2, endAngle: Math.PI * 2, value: 0});
this._current = i(0);
return function (t) {
return arc(i(t));
};
}
</script>
选择1
选择2
变量数据集={
螺柱1:[5324528479196972403740245],
螺柱2:[200200200200200]
};
可变宽度=960,
高度=500,
半径=数学最小值(宽度、高度)/2;
var={
startAngle:0,
端角:0
};
逆时针方向的var={
startAngle:Math.PI*2,
endAngle:Math.PI*2
};
var color=d3.scale.category20();
var pie=d3.layout.pie()
.sort(空);
var arc=d3.svg.arc()
.内半径(半径-100)
.外层(半径-20);
var svg=d3.选择(“#main”).追加(“svg”)
.attr(“宽度”,宽度)
.attr(“高度”,高度)
.附加(“g”)
.attr(“变换”、“平移”(+width/2+)、“+height/2+”);
//将开始和结束角度设置为0,以便进行过渡
//以后按顺时针方向调整到实际值
var path=svg.selectAll(“路径”)
.数据(pie(数据集.stud_1))
.enter().append(“路径”)
.attr(“fill”,函数(d,i){返回颜色(i);})
.attr(“d”,弧(顺时针)
.每个功能(d){
这是当前的{
数据:d.data,
价值:d.价值,
startAngle:enter顺时针。startAngle,
endAngle:按顺时针方向输入。endAngle
}
});//存储初始值
path.transition()//更新
.持续时间(750)
.attrTween(“d”,arcTween);
d3.选择全部(“输入”)。打开(“更改”,更改);
var timeout=setTimeout(函数(){
d3.选择(“输入[值=\“螺柱2\”]”)。属性(“选中”,为真)。每个(更改);
}, 2000);
函数更改(){
clearTimeout(超时);
path=path.data(pie(数据集[this.value]);//更新数据
//将开始和结束角度设置为Math.PI*2,以便我们可以过渡
//以后按逆时针方向调整到实际值
path.enter().append(“路径”)
.attr(“填充”,函数(d,i){
返回颜色(i);
})
.attr(“d”,弧(逆时针)
.每个功能(d){
这是当前的{
数据:d.data,
价值:d.价值,
startAngle:逆时针进入。startAngle,
endAngle:逆时针输入。endAngle
};
});//存储初始值
path.exit()
.
<form>
<label><input type="radio" name="dataset" value="stud_1" checked> Option 1 </label>
<label><input type="radio" name="dataset" value="stud_2"> Option 2 </label>
</form>
<script>
var dataset = {
stud_1: [53245, 28479, 19697, 24037, 40245],
stud_2: [200, 200, 200, 200]
};
var width = 960,
height = 500,
radius = Math.min(width, height) / 2;
var enterClockwise = {
startAngle: 0,
endAngle: 0
};
var enterAntiClockwise = {
startAngle: Math.PI * 2,
endAngle: Math.PI * 2
};
var color = d3.scale.category20();
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc()
.innerRadius(radius - 100)
.outerRadius(radius - 20);
var svg = d3.select("#main").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 3 + "," + height / 3 + ")");
var svg2 = d3.select("#main2").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + (width / 3 * 2) + "," + (height / 3 * 2) + ")");
var svg3 = d3.select("#main3").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + (width / 3 * 2) + "," + (height / 3 * 2)+ ")");
// set the start and end angles to 0 so we can transition
// clockwise to the actual values later
var path = d3.selectAll('svg').selectAll("path")
.data(pie(dataset.stud_1))
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc(enterClockwise))
.each(function(d) {
this._current = {
data: d.data,
value: d.value,
startAngle: enterClockwise.startAngle,
endAngle: enterClockwise.endAngle
}
}); // store the initial values
path.transition() // update
.duration(750)
.attrTween("d", arcTween);
d3.selectAll("input").on("change", change);
var timeout = setTimeout(function() {
d3.select("input[value=\"stud_2\"]").property("checked", true).each(change);
}, 2000);
function change() {
clearTimeout(timeout);
path = d3.selectAll('svg').selectAll('path').data(pie(dataset[this.value])); // update the data
// set the start and end angles to Math.PI * 2 so we can transition
// anticlockwise to the actual values later
path.enter().append("path")
.attr("fill", function (d, i) {
return color(i);
})
.attr("d", arc(enterAntiClockwise))
.each(function (d) {
this._current = {
data: d.data,
value: d.value,
startAngle: enterAntiClockwise.startAngle,
endAngle: enterAntiClockwise.endAngle
};
}); // store the initial values
path.exit()
.transition()
.duration(750)
.attrTween('d', arcTweenOut)
.remove() // now remove the exiting arcs
path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
}
// Store the displayed angles in _current.
// Then, interpolate from _current to the new angles.
// During the transition, _current is updated in-place by d3.interpolate.
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) {
return arc(i(t));
};
}
function arcTweenOut(a) {
var i = d3.interpolate(this._current, {startAngle: Math.PI * 2, endAngle: Math.PI * 2, value: 0});
this._current = i(0);
return function (t) {
return arc(i(t));
};
}
</script>