私はd3をいじり始めたばかりで、要素をクリックするとどのように色を変えることができるのか疑問に思いました。
このフィドルは、クリックすると円の色が変わりますが、もう一度クリックすると、色を白に戻したいと思います。
現在のコード:
var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 100)
.attr("height", 100);
sampleSVG.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", 50)
.attr("cy", 50)
.on("click", function(){d3.select(this).style("fill", "Magenta");});
自分でトグル関数を作成し、クリックに渡します: http://jsfiddle.net/maniator/Bvmgm/6/
var toggleColor = (function(){
var currentColor = "white";
return function(){
currentColor = currentColor == "white" ? "Magenta" : "white";
d3.select(this).style("fill", currentColor);
}
})();
これは、ジャンキーな方法ではありますが、機能しました。 。 。
var PointColors = ['white', 'Magenta']
var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 100)
.attr("height", 100);
sampleSVG.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", 50)
.attr("cy", 50)
.on("click", function(){
PointColors = [PointColors[1], PointColors[0]]
d3.select(this).style("fill", PointColors[0]);});
編集:Chromeでは機能しません。FFで機能します。問題は、塗りつぶしの属性にあります。
this.style.fill
Chromeは「#FFFFFF」で「白」を変更します。
ちなみに、より明確な解決策はクラスを切り替えることです。
.on("click", function(){var nextColor = this.style.fill == "white" ? "Magenta" : "white";
d3.select(this).style("fill", nextColor);});
http://jsfiddle.net/kUZuW/ を参照してください