如何使用 d3 设置 Javascript 按钮的样式？

Question

我正在使用 JavaScript 的 d3.js 库为我的应用程序创建部分 GUI。我做了一个按钮，它作为一个按钮工作，但我希望它是一个切换按钮。具体来说，我希望它在单击时更改样式。

由于种种原因，样式表或者head里面的css都不能动，只能用JavaScript。

这就是我创建按钮的方式（文档中有一个 id = 'menu' 的 div）：

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 函数之类的内容放入 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")
    });

这是一个工作代码