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 overlap other elements using resizable element?

    How to combine HTML, CSS, and Javascript into an HTML code

    How to change pseudo class property?

    CSS check box, how to make an item unchecked only if another one is checked

    How can I get a Select elements Options to “right-width” but leave the width of the Select itself unchanged?

    How to have no border around a DIV

    How can I set a Horizontal! scroll bar for my Github page under this bootstrap theme? [closed]

    How can I target a element inside h2

    How to create login popup on mouseover on a link using css & or javascript.

    How to wrap the center content and make it take the remaining width of the div

    how to overlap two div in css?

    how to make background 100% on a top menu

    How can we retrive style from css by selector without creating element?

    How do you measure the height of a HTML element scaled with CSS3 transform?

    How to set css @media print styling with jquery

    How to create a HTML and CSS “Try it yourself” Editor [closed]

    How to avoid text go below the thumbnail with css

    Bold text not showing on iPhone but displays fine on Android

    How to make angular material dialog box work in IE10

    How to position AdSense on site with CSS position: absolute

    How can I achieve this Flash effect using jQuery?

    CSS: Hover in one DIV, how to display information from another DIV?

    How to stylize second level dropdown menu list

    How to dynamically create a css style rule that is overridable by earlier rules

    How to get the max width of my css element using javascript

    How to import css from libraries via postCSS?

    Getting a resolution error on Chrome and Firefox for C9 app. Not sure how to resolve

    How to control tr height of table in CSS

    How to select two different elements with an XPath query

    How to compile scss to css with node-sass