Как создать стиль Javascript с помощью d3?

Question

Я использую библиотеку d3.js для JavaScript, чтобы создавать части графического интерфейса для моего приложения. Я сделал кнопку, и она работает как кнопка, но я хочу, чтобы это была кнопка переключения. В частности, я хочу, чтобы он менял стили при нажатии.

По различным причинам, я не могу прикоснуться к css в таблице стилей или голове, я могу использовать только JavaScript.

Это, как я создаю кнопку (есть DIV с ID = «меню» в документе):

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

Как я могу повторно стиль кнопка? Я попытался помещать такие объекты, как d3.select("#buttonCentre").style("background", "#ccc");, в функцию on_click, но d3 не распознает стандартные имена css для стилизации, использует разные имена, и я не могу найти список или сопоставление эквивалентности.

Answer 1

Использовать background-color вместо 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") 
    }); 

Вот рабочий code