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 remove hover effect from a column of a table

    How to change a vertical css menu to a horizontal one

    How to remove the space between inline-block elements?

    How do I float a
  • to the right in CSS?
  • How to move “+” to right i n css?

    How to spread a div to cover available space in a parent container?

    How to include multiple Css Class in ActionLink?

    in slick slideshow, just want center slide to be active

    How can you hide the title tag using CSS?

    How to have a sidebar on the right in a responsive page with maximum width?

    How slow is * css selector for mobile browsers?

    How do I create 3D perspective using CSS3?

    CSS - How to make a div as wide as a containing child img

    How to implement this button in HTML / CSS?

    How to stop text in div pushing other divs down the page?

    How to change CSS li tag in Bootstrap3 navigation when in and out or responsive view?

    How to remove a CSS class from a Wicket component?

    CSS how to not use style

    How to make dropdown menu disappear after a certain amount of time JavaScript

    How to set backround image in css

    How to make margins collapse evenly?

    How do you associate a css/sass stylesheet to a view in rails?

    How can I have multiple jQuery button styles on one page?

    How to push down second dropdown when open first ?

    How to: Illustrator graphic to web animation [closed]

    How do I center (vertically and horizontally) buttons in a div tag?

    How to support transitionend without browser sniffing?

    How to color the Horizontal and Vertical Lines at (0,0) darker in JavaFX

    How I write a:hover::before in less file?

    How to draw a dotted line with css?