D3.js 当d3中未选择任何圆时,如何显示所有圆?
标题几乎说明了所有: 我希望在用户决定从图例中选择一个圆之前显示每个圆 在下面的代码段中,您可以运行它,您可以看到,我已经成功地使选择部分仅在最初不显示圆时工作。我不知道如何在不把代码弄乱的情况下扭转局面 进一步的细节:我认为解决这个问题的一种方法是实现一个计数器来计算var active=d.active发送的每个true-false?假:真;然后在计数相等时显示所有圆圈D3.js 当d3中未选择任何圆时,如何显示所有圆?,d3.js,D3.js,标题几乎说明了所有: 我希望在用户决定从图例中选择一个圆之前显示每个圆 在下面的代码段中,您可以运行它,您可以看到,我已经成功地使选择部分仅在最初不显示圆时工作。我不知道如何在不把代码弄乱的情况下扭转局面 进一步的细节:我认为解决这个问题的一种方法是实现一个计数器来计算var active=d.active发送的每个true-false?假:真;然后在计数相等时显示所有圆圈 var truecount = 0; var falsecount = 0; if (active) {truecou
var truecount = 0;
var falsecount = 0;
if (active) {truecount+=1} else {falsecount+=1};
if (truecount > 0 && truecount == falsecount) {d3.selectAll(".cercle")
.attr("display", "true)};
但是:
1/它不起作用,我能听到你嘲笑代码多么原始
2/我觉得有一个更简单的方法来实现这一点
有人吗
var data=123456789.split.mapfunctiond{
返回{
价值:d
}
};
var color=d3.scaleOrdinal
.范围[00baff、0014fe、00dbaf、f4bf02、ffa600、ff0000、ff00c4、ee693e、99958f];
var svg=d3.selectbody
.appendsvg
.宽度,600
.身高,600
var fullgraph=svg.selectAllcircles
.数据
进来
A.附加圆
一级
.attrcx,函数d,i{return 200+i*30}
.自然减员,100
.attrr,function,j{return 5+j*2}
.attrid,函数d,i{return cir+i}
.attrfill,函数d,i{return colori}
.attr显示,无
var legende=svg.selectAllbar
.数据
进来
.附录
.attrx,0
.attry,功能正常,i{
返回12+i*20
}
legende.appendtext
.我{
返回d值
}
.attrclass,legtext
.stylefont系列,helvetica
.stylefill不透明度,0.8
.attrx,4
.attry,功能正常,i{
返回12+i*20
}
.STYLE字体大小,10
.stylefill,函数,i{
返回颜色
}
.styletext装饰,无
.不透明度,1;
附录
.attrclass,recta
.attrx,2
.attry,功能正常,i{
返回1+i*20
}
.宽度,65
.身高15
.stylefill,函数,i{
返回颜色
};
legende.onclick,函数d,i{
var active=d.active?假:真;
d3.selectAll.cercle-cir+i
.attrsplay,函数{if active{return none}else{return none}};
d3.选择CIR+i
.attrsplay,函数{if active{return true}else{return none};
d3.选择这个
.selectrect
.样式、功能{
如果是主动返回1;
}
d3.选择这个
.选择文本
.stylefill,function,j{
如果激活{
返回白色;
}否则{
返回颜色
}
}
提升
d、 活跃的
};
莱根德先生{
光标:指针;
}
直肠肌{
不透明度:0.1;
光标:指针;
}
D3表示数据驱动的文档。因此,请使用数据:将活动绑定到圆,并根据该数据设置圆的显示:
d3.selectAll(".cercle").attr("display", function(d) {
if (d.active) {
return "true"
} else {
return "none"
}
});
以下是您的更新代码:
var data=123456789.split.mapfunctiond{
返回{
价值:d
}
};
var color=d3.scaleOrdinal
.范围[00baff、0014fe、00dbaf、f4bf02、ffa600、ff0000、ff00c4、ee693e、99958f];
var svg=d3.selectbody
.appendsvg
.宽度,600
.身高,600
var fullgraph=svg.selectAllcircles
.数据
进来
A.附加圆
一级
.attrcx,函数,i{
返回200+i*30
}
.自然减员,100
.attrr,functione,j{
返回5+j*2
}
.attrid,functionad,i{
返回cir+i
}
.attrfill,functionad,i{
返回颜色
};
var legende=svg.selectAllbar
.数据
进来
.附录
.attrx,0
.attry,功能正常,i{
返回12+i*20
}
legende.appendtext
.我{
返回d值
}
.attrclass,legtext
.stylefont系列,helvetica
.stylefill不透明度,0.8
.attrx,4
.attry,功能正常,i{
返回12+i*20
}
.STYLE字体大小,10
.stylefill,函数,i{
返回颜色
}
.styletext装饰,无
.不透明度,1;
附录
.attrclass,recta
.attrx,2
.attry,功能正常,i{
返回1+i*20
}
.宽度,65
.身高15
.stylefill,函数,i{
返回颜色
};
legende.onclick,函数d,i{
var active=d.active?假:真;
d3.选择CIR+i.每个功能{
d、 活跃的
};
d3.selectAll.cercle.attrdisplay,功能D{
如果d是活动的{
返回真值
}否则{
一无所获
}
};
d3.选择这个
.selectrect
.样式、功能{
如果是主动返回1;
}
d3.选择这个
.选择文本
.stylefill,function,j{
如果激活{
返回白色;
}否则{
返回颜色
}
}
提升
d、 活跃的
};
莱根德先生{
光标:指针;
}
直肠肌{
不透明度:0.1;
光标:指针;
}
D3表示数据驱动的文档。因此,请使用数据:将活动绑定到圆,并根据该数据设置圆的显示:
d3.selectAll(".cercle").attr("display", function(d) {
if (d.active) {
return "true"
} else {
return "none"
}
});
H
以下是您的更新代码:
var data=123456789.split.mapfunctiond{
返回{
价值:d
}
};
var color=d3.scaleOrdinal
.范围[00baff、0014fe、00dbaf、f4bf02、ffa600、ff0000、ff00c4、ee693e、99958f];
var svg=d3.selectbody
.appendsvg
.宽度,600
.身高,600
var fullgraph=svg.selectAllcircles
.数据
进来
A.附加圆
一级
.attrcx,函数,i{
返回200+i*30
}
.自然减员,100
.attrr,functione,j{
返回5+j*2
}
.attrid,functionad,i{
返回cir+i
}
.attrfill,functionad,i{
返回颜色
};
var legende=svg.selectAllbar
.数据
进来
.附录
.attrx,0
.attry,功能正常,i{
返回12+i*20
}
legende.appendtext
.我{
返回d值
}
.attrclass,legtext
.stylefont系列,helvetica
.stylefill不透明度,0.8
.attrx,4
.attry,功能正常,i{
返回12+i*20
}
.STYLE字体大小,10
.stylefill,函数,i{
返回颜色
}
.styletext装饰,无
.不透明度,1;
附录
.attrclass,recta
.attrx,2
.attry,功能正常,i{
返回1+i*20
}
.宽度,65
.身高15
.stylefill,函数,i{
返回颜色
};
legende.onclick,函数d,i{
var active=d.active?假:真;
d3.选择CIR+i.每个功能{
d、 活跃的
};
d3.selectAll.cercle.attrdisplay,功能D{
如果d是活动的{
返回真值
}否则{
一无所获
}
};
d3.选择这个
.selectrect
.样式、功能{
如果是主动返回1;
}
d3.选择这个
.选择文本
.stylefill,function,j{
如果激活{
返回白色;
}否则{
返回颜色
}
}
提升
d、 活跃的
};
莱根德先生{
光标:指针;
}
直肠肌{
不透明度:0.1;
光标:指针;
}
尝试注释行“.attrdisplay,none`如果我这样做并将ˋnone`更改为true,则选择将不起作用。它将起作用,但从第二个选择开始,因为第一个选择需要按条件更改显示它将起作用。请尝试注释行”.attrdisplay,none`如果我这样做,并将ˋnone`更改为true,则选择将不起作用。它将起作用,但从第二个选择开始,因为第一个选择需要通过条件更改显示,它将起作用再次感谢@GerardoFurtado,您的回答非常有意义。然而,我必须道歉,因为我的问题不是很清楚:我正在寻找一种方法来显示互动前后的圆圈,因此我想到了一个真-假计数器。我花了整整一个下午试图自己解决这个问题,阅读几乎所有关于打开切换功能的帖子,包括你过去的答案,尽管我掌握了逻辑,但我仍然不知道如何在取消单击所有按钮后恢复所有圆圈。你想要的对用户来说没有意义,因为没有选择矩形。无论如何,这里是:…如何让所有的圆圈回来,一旦所有的按钮被取消点击->我认为这是有意义的。无论如何,谢谢你的时间,你之前的答案是最接近我想要实现的。稍后我可能会重新表述我的问题。是的,事实上,我仍然不清楚。请使用我的代码片段的数据绑定方法,并发布另一个问题,更好地解释您想要的行为。我希望有人能帮你。好的,先生。这确实很有帮助,谢谢。再次感谢@GerardoFurtado,你的回答很有道理。然而,我必须道歉,因为我的问题不是很清楚:我正在寻找一种方法来显示互动前后的圆圈,因此我想到了一个真-假计数器。我花了整整一个下午试图自己解决这个问题,阅读几乎所有关于打开切换功能的帖子,包括你过去的答案,尽管我掌握了逻辑,但我仍然不知道如何在取消单击所有按钮后恢复所有圆圈。你想要的对用户来说没有意义,因为没有选择矩形。无论如何,这里是:…如何让所有的圆圈回来,一旦所有的按钮被取消点击->我认为这是有意义的。无论如何,谢谢你的时间,你之前的答案是最接近我想要实现的。稍后我可能会重新表述我的问题。是的,事实上,我仍然不清楚。请使用我的代码片段的数据绑定方法,并发布另一个问题,更好地解释您想要的行为。我希望有人能帮你。好的,先生。这确实很有帮助,谢谢你。