web-dev-qa-db-ja.com

クリック時にd3javascriptの代替色

私は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");});
javascriptd3.js
12
reptilicus

自分でトグル関数を作成し、クリックに渡します： 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);
    }
})();
19
Neal

これは、ジャンキーな方法ではありますが、機能しました。 。 。

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]);});
3
reptilicus

編集：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/ を参照してください

1
crispamares