CODEWITHSUNDEEP
d3.js
Ramprasath
Ramprasath

Reputation: 129

Data toggle using radio buttons in D3

I have a simple visualisation of single bar transition which is triggered based on the bootstrap radio buttons. Here is the code:

<body>
<div>
    <svg class="chart tank-chart"></svg>
    <form>
        <div class="btn-group" id="months" data-toggle="buttons">
            <label class="btn btn-primary active">
                <input type="radio" name="options" value="0" autocomplete="" checked> January
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="1" autocomplete="off"> February
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="2" autocomplete="off"> March
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="3" autocomplete="off"> April
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="4" autocomplete="off"> May
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="5" autocomplete="off"> June
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="6" autocomplete="off"> July
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="7" autocomplete="off"> August
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="8" autocomplete="off"> September
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="9" autocomplete="off"> October
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="10" autocomplete="off"> November
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="11" autocomplete="off"> December
            </label>
        </div>
    </form>
</div>
<script type="text/javascript">
    "use strict";
    var w = 600;
    var h = 400;
    var dataset = [2000, 4000, 6000, 8000, 10000, 15000, 18000, 23450, 28000, 30000, 33000, 35000]; // tank levels
    var tank = 35000; // maximum size
    var barwidth = 150; // tank width
    var maxheight = 175;
    var animationDuration = 700;


    var svg = d3.select(".tank-chart")
        .attr("width", w)
        .attr("height", h);

    var bar = svg.append("rect")
        .attr("class", "bar")
        .attr("x", 200)
        .attr("y", maxheight)
        .attr("width", barwidth)
        .attr("height",  maxheight*(dataset[0]/tank))
        .attr("fill", 'blue');


    $("#months").click(function(){
            var radioValue = $("input[name='options']:checked").val();
            bar.transition()
                .duration(animationDuration)
                .attr("height", maxheight*(dataset[radioValue]/tank))
                .attr("fill", 'blue');
    });

</script>
</body>
</html>

The problem I face is the bar is inverted. Something to do with 'y' value which I am not sure

enter image description here enter image description here

I am new to d3. What am I doing wrong here? Thanks!

Upvotes: 0

Views: 851

Answers (1)

Marcelo
Marcelo

Reputation: 4282

Here is how you should set the y attribute of the rect element:

    "use strict";
    var w = 600;
    var h = 200;
    var dataset = [2000, 4000, 6000, 8000, 10000, 15000, 18000, 23450, 28000, 30000, 33000, 35000]; // tank levels
    var tank = 35000; // maximum size
    var barwidth = 150; // tank width
    var maxheight = 175;
    var animationDuration = 700;


    var svg = d3.select(".tank-chart")
        .attr("width", w)
        .attr("height", h);

    var bar = svg.append("rect")
        .attr("class", "bar")
        .attr("x", 200)
        .attr("y", maxheight- maxheight*(dataset[0]/tank))
        .attr("width", barwidth)
        .attr("height",  maxheight*(dataset[0]/tank))
        .attr("fill", 'blue');


    $("#months").click(function(){
            var radioValue = $("input[name='options']:checked").val();
            bar.transition()
                .duration(animationDuration)
                .attr("height", maxheight*(dataset[radioValue]/tank))
                 .attr("y", maxheight-  maxheight*(dataset[radioValue]/tank))
                .attr("fill", 'blue');
    });
<div>
    <svg class="chart tank-chart"></svg>
    <form>
        <div class="btn-group" id="months" data-toggle="buttons">
            <label class="btn btn-primary active">
                <input type="radio" name="options" value="0" autocomplete="" checked> January
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="1" autocomplete="off"> February
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="2" autocomplete="off"> March
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="3" autocomplete="off"> April
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="4" autocomplete="off"> May
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="5" autocomplete="off"> June
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="6" autocomplete="off"> July
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="7" autocomplete="off"> August
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="8" autocomplete="off"> September
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="9" autocomplete="off"> October
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="10" autocomplete="off"> November
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" value="11" autocomplete="off"> December
            </label>
        </div>
    </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Upvotes: 2

Related Questions