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..
For that you need to use Less or Sass witch are CSS Dynamic languages. here's some comparison between both technologies...
Percentage height is calculated based on the height of the first positioned parent. In this case, the #keys and #kbd divs don't have a position CSS rule. This means the...
Use Pygments. Once you have it installed (sudo pip install pygments on Ubuntu), if you save your code to a file like foo.rb, you can call pygmentize like so: pygmentize...
Use the a java.net.URL instead of an InputStream, e.g. as follows: protected Object loadController(String url) throws IOException { try { FXMLLoader loader = new FXMLLoader(getClass().getResource(url)); loader.load(); return loader.getController(); } catch(...)...
You can put overflow:hidden on the third column and it will automatically take up the remaining space. See this fiddle. Example: HTML: <div class="container"> <div class="one"></div> <div class="two"></div> <div class="three"></div>...
Get rid of your floats. Then put font-size: 0 on #container and font-size: 16px on the children. #container { font-size: 0; } #left, #right { font-size: 16px; //You can use...
You could use a pseudo-element on the .close element and position that between the lightbox and the image using z-index. .overlay:target .close:before { position: fixed; content: ''; top: 0; left:...
You could do it with the canvas element and some sort of bezier curve animation, but it may be just as well to do it with images (and certainly easier)....
One possible way is something like this (.hMenu is the outer ul here): .hMenu > li { /* for direct childs (>) of .hMenu that are li-s */ /* inline-block...
You can use display: inline-block property with text-align: center on parent to centralizer your cards. .wrap { background-color: green; position: relative; text-align: center; padding: 30px 0 0; height: 100px; }...
Since you currently can't transverse the DOM tree, this seems to be the only thing possible in pure CSS. Basically, the general sibling combinator, ~, allows us to access all...
Using only CSS with CSS3 calc function help: You can define side DIV elements width using the following CSS property: width: calc((100% - 200px) / 2); /* browsers with native...
Are you looking for something like this? Check out my fiddle and let me know. Maybe like this? print <fieldset> print <legend> columns = 2 offset = 0 class =...
I would put this in a comment, but I need 50 rep :( Play around with: max-height:10%; It will stop it from expanding too high, you'll have to get your...
Chain two :nth-child() pseudoclasses to match a range of adjacent elements: li:nth-child(n+2):nth-child(-n+3) { margin-right: 50px; } this will select both the second and the third li Codepen Demo Visual result...
What you need is a mix of position:relative and margin:0 auto applied to a container. Add a container div: .container { width:1150px; margin:0 auto; position:relative; } See updated JSFIDDLE...
You need to drop the HTML styles, and replace it with BODY styles: body{ padding: 10% 0px 0px 0px; margin: 0px; position: fixed; height:100%; width:100%; box-sizing: border-box; overflow:none; /* Gets...
(answering only your update here) To make it work in IE7, you can add this: <!--[if IE 7]> <style> .inline-list, ul.program-menu li { display: inline; zoom: 1 } </style> <![endif]-->...
You can add a CSS class or id to a link_to by setting it in the html_options hash, which is the last parameter of the link_to helper. For example, using...
I wrote about the best way I've found to do this here - https://github.com/css-modules/css-modules/issues/199 Basically, it's just importing those styles from the original css file. Because those styles are all...
I would go with the html tag: html { background: url('http://i889.photobucket.com/albums/ac93/aussieking/background_image.png') center center; background-size: cover; } ...
You can use CSS3 Media Queries to achieve that So: #element { position:absolute; left: 70%; } If you don't want it to overlay an object when you have a smaller...
.dropdown-menu has min-width: 160px; and min-width overrides width so you can not change width you can use min-width instead of width. .dropdown-menu { min-width: 60px !important; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script...
Well add this inside your TDs class="menu-item" onclick="selectMenu($(this))" Then use this javascript code, you must include fist of all jquery.min.js function selectMenu(e){ $('.menu-item').removeClass('clicked'); e.addClass('clicked'); } Add this css too .clicked{...
The issue with your original code is you're specifying img as a class i.e .img rather than img Here's 2 ways to do this. 1st with no css: <img src="your-image.jpg"...
Give the element a container, with the border radius and set the overflow of the container to hidden and also give this element the border: HTML <div class='rounded'> <a href="#"...
Simplest is to add z-index:-999; to .title-1, this will push down the relative div below any div Demo CSS .title-1 { border-bottom:1px solid #4db2ec; margin-bottom:10px; padding-bottom:4px; position:relative; font-size:16px !important; z-index:-999;...
Okay I guess I found out a way, which is possible but a hack. Since ids are all same and you do use jQuery, it is easy to change it...
From the jQuery source - CSS opacity. fadeTo: function( speed, to, easing, callback ) { return this.filter(":hidden").css("opacity", 0).show().end() .animate({opacity: to}, speed, easing, callback); ...
I put together two options for you- jsFiddle Option 1- Not DRY but a little more condensed: #box { width:300px; height:300px; background:red; animation: animate 1s ease-in-out 0s infinite alternate; }...