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 make jquery transition smoothly

    How to parse the default css property to inline style attribute

    How do I keep the 'hover' effect while using a Jquery color change effect while scrolling

    Make converted joomla template show 2 colums in main content

    How to put the div at the center with css?

    How do I stop the FLOAT (without extra markup)?

    How to make pixel perfect font in css?

    How to change the width of displayed text nested in a div?

    How to apply CSS(background image) to radiobutton when it clicks?

    Css: How to make position fixed 100% resizable with bottom padding? - JS Fiddle provded

    If I have 3 elements, how do I only allow one to be highlighted when clicked at any one time? - CSS, jQuery

    How can I customize the CSS generated by LESS to include Font Awesome?

    How to link a header in a standards-compliant way?

    How to apply CSS directives to h3 element?

    How to dynamically manipulate elements in HTML

    How to give reference to static resources like css,images,java script in JSP?

    How to change scrollbar in textarea input?

    How do i split user inputed text into individual characters?

    how to vertically align the 2 different font sizes inside a single

    How to make a HTML5 spinning list/rotating wheel selector/picker

    How to set css class for Rails date_select year select?

    How to remove CSS underline?

    How do I vertically align text inside an anchor element, which is nested within an unordered list

    How to get css button to stay active after it has been clicked?

    How to control tr height of table in CSS

    selenium - how to click on a link based on its text using css instead of xpath and without using the contains operator?

    how to move css element with scrolling left with Jquery?

    How to create a curve tail for speech bubble with CSS?

    How can I have a CSS hover affect a different tag?

    How can i make an element from a bottom stacking context stays in front of another higher stacking context? [duplicate]