d3js | toggle yes no UI buttons

I needed some simple yes/no buttons that could be dropped into a prototype UI.

These toggle boolean yes and no buttons can be added into DOM as reusable UI elements. They can be passed custom click events.

Call the function and pass in container/selection as the argument:

var myButtons = noYesBtns('#some-id');

Optional overrides that can be chained via the api (showing defaults):

nTxt('no') // string for NO button
yTxt('yes') // string for YES button
nBg('grey') // string for unselected background for NO
yBg('grey') // string for unselected bg for YES
nBgActive('green'), // string for selected bg for NO
yBgActive('green'); // string for selected bg for YES

Note: examples in index.html

forked from eesur's block: d3js | toggle yes no UI buttons

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <style>
        body {
            font-family: Consolas, monaco, monospace;
            font-size: 14px; 
            width: 400px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            font-size: 18px; 
            font-weight: normal;
        }
        section {
            margin: 20px 0;
            padding-bottom: 20px;
            border-bottom: 1px dotted #ccc; 
        }
        #q3 button.ny-btn {
            font-size: 72px;
        }
    </style>
    
    <link rel="stylesheet" href="noYesBtns.css">
</head>

<body>

<header>
        <h1>Toggle reusable boolean buttons:</h1>
    </header>
    <section id="q1"></section>

<footer>Feedback: <span id="feedback"></span> </footer>

var q2 = noYesBtns('#q2')
            .nTxt('false')
            .yTxt('true')
            .on('_click', function () {
                d3.select(this).style('background', '#FDBB30');
                d3.select('#feedback').text('just selected: ' + this.firstChild.data);
            })
            .render();

var q3 = noYesBtns('#q3')
            .nTxt('0')
            .yTxt('1')
            .on('_click', function () {
                d3.select('#feedback').text('just selected: ' + this.firstChild.data);
            })
            .render();
    </script>

</body>
</html>

https://d3js.org/d3.v3.min.js