将 function 绑定到按钮 d3.js - 无法在散点图中使按钮切换 colors

Question

I am trying to create a scatterplot that checks whether one attributes value is the same or different and then colors the datapoint in the scatterplot according to that. So far I have achieved it but I want to check between columns, ex. column 3 is checked against all the other columns but in 4 different ways. I am trying to add switches (buttons) so that when I click on one particular button it checks (column 3 and 4), another one that checks (column 3 and 5) etc.

this is how I check that in d3 code:

   if (button_goo.clicked === true){
        if (d.foo == "0" && d.goo == "0"){
                return "blue";
        }
        else if (d.foo == "1" && d.goo == "1"){
                        return "green";
        }
        else if (d.foo == "1" && d.goo == "0"){
                        return "red";
        } 
        else if (d.foo == "0" && d.goo == "1"){
                        return "violet";
        }
     }
    else if(button_bar.clicked === true){
        if (d.foo == "0" && d.goo == "0"){
                return "blue";
        }
        else if (d.foo == "1" && d.goo == "1"){
                        return "green";
        }
        else if (d.foo == "1" && d.goo == "0"){
                        return "red";
        } 
        else if (d.foo == "0" && d.goo == "1"){
                        return "violet";
        }
    }
    else if(button_boo.clicked === true){
        if (d.foo == "0" && d.goo == "0"){
                return "blue";
        }
        else if (d.foo == "1" && d.goo == "1"){
                        return "green";
        }
        else if (d.foo == "1" && d.goo == "0"){
                        return "red";
        } 
        else if (d.foo == "0" && d.goo == "1"){
                        return "violet";
        }
    }

I know it's not beautiful because if I have more columns I would need to repeat this many times. But my main problem is that when I click the buttons, nothing happens. I have checked my code and I can't locate the problem. This is the whole code in jsfiddle

Answer 1

I change your code structure.

It seems you don't understand d3 update pattern.

all working example is here https://scrimba.com/c/cv8wD7H2

 var dataSet = [ {hour: "0.1",yval: "0.2",foo: "0", goo:"0", bar:"1", boo:"0"}, {hour: "14",yval: "0.4",foo: "0", goo:"1", bar:"0", boo:"0"}, {hour: "15",yval: "0.3",foo: "0", goo:"0", bar:"0", boo:"1"}, {hour: "19",yval: "241",foo: "0", goo:"0", bar:"0", boo:"0"}, {hour: "22",yval: "0.2",foo: "0", goo:"0", bar:"1", boo:"1"}, {hour: "08",yval: "118",foo: "1", goo:"0", bar:"1", boo:"0"}, {hour: "22",yval: "48",foo: "0", goo:"1", bar:"0", boo:"1"}, {hour: "21",yval: "31",foo: "1", goo:"0", bar:"1", boo:"1"}, {hour: "12",yval: "38",foo: "0", goo:"1", bar:"0", boo:"0"}, {hour: "16",yval: "138",foo: "1", goo:"1", bar:"0", boo:"0"}, {hour: "05",yval: "344",foo: "0", goo:"1", bar:"1", boo:"1"}, {hour: "08",yval: "218",foo: "0", goo:"0", bar:"1", boo:"0"}, {hour: "03",yval: "18",foo: "1", goo:"0", bar:"0", boo:"0"}, {hour: "18",yval: "98",foo: "1", goo:"0", bar:"0", boo:"1"}, {hour: "18",yval: "98",foo: "0", goo:"1", bar:"1", boo:"0"}, ]; const COLOR_SET = { "goo": { "0:0": "blue", "1:1": "green", "1:0": "red", "0:1": "violet" }, "bar": { "0:0": "green", "1:1": "red", "1:0": "violet", "0:1": "blue" }, "boo": { "0:0": "red", "1:1": "violet", "1:0": "blue", "0:1": "green" } } function getColorByColorSet(colorSetName) { return function(data) { try { return COLOR_SET[colorSetName][ data.foo +':'+data.goo ] }catch(e) { console.error(colorSetName, data) throw e; } } } function MyScatterPlot(options={}) { var {w=500,h=500,top_pad=20,left_pad=100,target='body',dataSet=[],colorSetName='goo'} = options; this.dataSet = dataSet; this.colorSetName = colorSetName; // prepare this.xScale = d3.scale.linear().domain([-1, 23]).range([left_pad, w - left_pad]) this.yScale = d3.scale.linear().domain([0, 350]).range([h - top_pad, top_pad]); this.svg = d3.select("body").append("svg:svg").attr("width", w + left_pad).attr("height", h + top_pad); this.symbolTypes = { "circle": d3.svg.symbol().type("circle") }; var fooColors = d3.scale.linear().domain([0, 50]).range(["#87CEFF", "#0000FF"]); var xAxis = d3.svg.axis().scale(this.xScale).orient("bottom"); var yAxis = d3.svg.axis().scale(this.yScale).orient("left"); this.svg.append("g").attr("class", "axis").attr("transform", "translate(0, " + (h - top_pad) + ")").call(xAxis); this.svg.append("g").attr("class", "axis").attr("transform", "translate(" + (left_pad) + ", 0)").call(yAxis); // end of prepare } MyScatterPlot.prototype.changeColorSet = function(selectedColorsetName) { this.colorSetName = selectedColorsetName; this.svg.selectAll("path.dot").style("fill", getColorByColorSet(this.colorSetName)) } MyScatterPlot.prototype.setData = function(dataSet) { this.dataSet = dataSet let allDots = this.svg.selectAll("path.dot").data(this.dataSet) allDots.exit().remove(); allDots.enter().append("path").attr("class", "dot").attr("d", (d,i)=>{return this.symbolTypes.circle();}) allDots.attr("transform", (d) => { return "translate(" + (this.xScale(d.hour) + (Math.random() * 12 - 6)) + "," + this.yScale(d.yval) + ")"; }).style("fill", getColorByColorSet(this.colorSetName)) } var scatterChart = new MyScatterPlot() scatterChart.setData(dataSet) let myUpdateFunction = function(clickedButtonName) { console.log('clickedButtonName: ' + clickedButtonName) scatterChart.changeColorSet(clickedButtonName) }

=== here is another answer for your comment. you need only on colorset. change color set like this

const COLOR_SET = {
            "0:0": "blue",
            "1:1": "green",
            "1:0": "red",
            "0:1": "violet"
}

and then change getColorByColorSet() function as you want.

colorSetName parameter actually has clicked button name. so can not be removed just change parameter name to clickedButton

    function getColorByColorSet(clickedButton) {
    return function(data) {
        var finalColor;
        try { 
            if(clickedButton === 'goo') {
               finalColor = COLOR_SET[ data['bar']+':'+data['boo']]    
            }else if(clickedButton === 'bar'){
               finalColor = COLOR_SET[ data['goo']+':'+data['boo']]    
            }else if(clickedButton === 'boo'){
               finalColor = COLOR_SET[ data['goo']+':'+data['bar']] 
            }
            return finalColor

        }catch(e) {
            console.error(colorSetName, data)
            throw e;
        }   
    }