Wie style ich eine Javascript-Taste mit d3?

Question

Ich benutze die d3.js-Bibliothek für JavaScript, um Teile der GUI für meine App zu erstellen. Ich habe einen Knopf gemacht, und es funktioniert wie eine Taste, aber ich will es eine Umschalttaste sein. Insbesondere möchte ich, dass Stile geändert werden, wenn darauf geklickt wird.

Aus verschiedenen Gründen kann ich nicht die CSS im Stylesheet oder den Kopf berühren, ich kann nur JavaScript verwenden. Diese

ist, wie ich die Taste erschaffe (es gibt eine div mit id = ‚Menü‘ im doc):

var menuDiv = d3.select("#menu"); 
var menuButton = menuDiv.append("button") 
    .text("Button") 
    .attr("id", "buttonCentre") 
    .classed("Button", true) 
    .on('click', function(){ 
     //Do stuff 
    }); 

Wie kann ich neu Stil der Taste? Ich habe versucht, Dinge wie d3.select("#buttonCentre").style("background", "#ccc"); in die on_click-Funktion zu setzen, aber d3 erkennt nicht die Standard-CSS-Namen für das Styling, es verwendet andere Namen, und ich kann keine Liste oder eine Äquivalenzzuordnung finden.

Answer 1

Verwenden Sie background-color anstelle von background.

var menuDiv = d3.select("body"); 
var menuButton = menuDiv.append("button") 
    .text("Button") 
    .attr("id", "buttonCentre") 
    .classed("button", true) 
    .on('click', function(){ 
     //here this is the button 
     d3.select(this).style("background-color", "#ccc") 
    }); 

Hier ist ein funktionierendes code