How do I style a Javascript button using d3?


Tags: javascript,css,d3.js

Problem :

I am using the d3.js library for JavaScript to create parts of the GUI for my app. I made a button, and it works as a button, but I want it to be a toggle button. Specifically, I want it to change styles when it is clicked.

For various reasons, I can't touch the css in the stylesheet or the head, I can only use JavaScript.

This is how I am creating the button (there is a div with id = 'menu' in the doc):

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

How can I re-style the button? I tried putting things like d3.select("#buttonCentre").style("background", "#ccc"); into the on_click function, but d3 doesn't recognize the standard css names for styling, it uses different names, and I can't find a list or an equivalence mapping.



Solution :

Use background-color instead of 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")
    });

Here is a working code


    CSS Howto..

    How to use variable in CSS? [duplicate]

    How to create a completely flexible piano keyboard with HTML and CSS

    How to create a code block on website

    How to include css file in a JavaFx Spring application

    How can I set a floats width to the left over space?

    How do I align two non-fixed width divs in the center of the browser screen?

    How to close CSS3 Lightbox by clicking outside of the current image?

    How to make this loading animation?

    How do I make a horizontal sitemap using UL?

    css how can i center multiple elements with absolute position

    How to use nth-child with :hover to style multiple children?

    How to create a 100% fixed footer with a fixed width center transparent gap?

    How to Build fieldSets with fixed width/height & 2 columns of checkboxes

    how to fix height:auto css

    How to choose second and third element (li) in
      tag (with CSS)?

    How to center a 3 column Css Div Site?

    how to make the position of div is fixed even though it's empty?

    How can I wrap content around a UL CSS Menu so content is seamless?

    How to change the color of Bootstrap links

    How to target CSS module classes after they are hashed?

    how to implement background img

    how to put css max-left or min-left position to absolute object?

    How to reduce the wiDth of dropdown-menu?

    how can i change the css style on click with table

    How do I resize an image in IE 8

    How to get border radius and gradient background working together in IE 9

    How to align with css

    How to modify wordpress plugin css [closed]

    How does jQuery .fadeTo() work?

    How to create DRY CSS when using transform & keyframes