Question

我有一个基于引导单选按钮触发的单条转换的简单可视化。这是代码：

<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>

我面临的问题是倒杆。与“＆＃39; y＆＃39;我不确定的价值

我是d3的新手。我在这做错了什么？谢谢！

Answer 1

以下是设置y元素的rect属性的方法：

＆＃13;

    "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');
    });

＆＃13;

<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>

＆＃13;

使用D3中的单选按钮进行数据切换

1 个答案: