javascript - d3 javascript点击时交替颜色

Question

我刚开始玩 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");});

Answer 1

让自己成为一个切换功能并将其传递给点击：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);
    }
})();

Answer 2

这也奏效了，尽管是以一种更简陋的方式。. .

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

Answer 3

编辑：在 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/