Question

我创建了以下图表：

使用以下代码：

<html lang="en">
    <body>
        <head>
            <meta charset="UTF-8">
                <link rel="stylesheet" type="text/css" href="http://dc-js.github.io/dc.js/css/dc.css"/>
        </head>
        <div class="x_content" style="margin: 0px 0px 0px 0px;color:black;width:250px;height:170px;background:#ffffff;border:1px solid black;">
            <div id="pieChart" style="margin: 0px 0px 0px 20px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Forecast Customer Activity&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                <head>
                    <style>
                        .dropbtn {
                            background-color: #ffffff;
                            color: black;
                            padding: 4px;
                            font-size: 10px;
                            border: box;
                            cursor: pointer;
                        }

                        .dropdown {
                            position: relative;
                            display: inline-block;
                        }

                        .dropdown-content {
                            display: none;
                            position: absolute;
                            background-color: #f9f9f9;
                            min-width: 60px;
                            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                        }

                        .dropdown-content a {
                            color: black;
                            padding: 4px 4px;
                            text-decoration: none;
                            display: block;
                        }


                        .dropdown-content a:hover {background-color: #f1f1f1}

                        .dropdown:hover .dropdown-content {
                            display: block;
                        }

                        .dropdown:hover .dropbtn {
                            background-color: #3e8e41;
                        }
                    </style>
                </head>
                </body>

                <body>
                    <div class="dropdown">
                        <button class="dropbtn" style="margin: 0px 0px 0px 0px;">Dropdown</button>
                        <div class="dropdown-content">
                            <a href="#"class="btn btn-secondary" type="button"  id="Voice">Voice</a>
                            <a href="#"class="btn btn-secondary" type="button"  id="Data">Data</a>
                        </div>
                    </div>
                    <div class="dropdown">
                        <button class="dropbtn" style="margin: 0px 0px 0px 0px;">Dropdown</button>
                        <div class="dropdown-content">
                            <a href="#"class="btn btn-secondary" type="button"  id="s4">0-4</a>
                            <a href="#"class="btn btn-secondary" type="button"  id="s408">4-8</a>
                            <a href="#"class="btn btn-secondary" type="button"  id="s812">8-12</a>
                            <a href="#"class="btn btn-secondary" type="button"  id="s1216">12-16</a>
                            <a href="#"class="btn btn-secondary" type="button"  id="s1620">16-20</a>
                            <a href="#"class="btn btn-secondary" type="button"  id="s2024">20-24</a>
                        </div>
                    </div>
                </body>
            </div>

            <script type="text/javascript" src="js/d3.js"></script>
            <script type="text/javascript" src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
            <script type="text/javascript" src="js/dc.js"></script>
            <script type="text/javascript">


                var Chart = dc.pieChart("#pieChart");
                d3.csv("data/Forecast_Customer_Activity.csv", function (error, experiments) {

                    var ndx = crossfilter(experiments),
                            Age_GrpDimension = ndx.dimension(function (d) {
                                return d.Age_Grp;
                            }),
                            Age_GrpGroup = Age_GrpDimension.group().reduceSum(function (d) {
                        return d.usage;
                    });
                    usage_cat = ndx.dimension(function (d) {
                        return d.Usage_category;
                    }),
                            timewindow = ndx.dimension(function (d) {
                                return d.Timewindow;
                            }),
                            Chart
                            .width(270)
                            .height(120)

                            .slicesCap(5)

                            .colors(d3.scale.ordinal().range(["#458dd1", "#cc7e30", "#a39d97", "#FFDA33", "#0f63bc", "#E51F30"]))
                            .dimension(Age_GrpDimension)
                            .group(Age_GrpGroup)

                            .legend(dc.legend().x(0).y(25).itemHeight(10).gap(2))


                            .on('pretransition', function (chart) {
                                chart.selectAll('text.pie-slice').text(function (d) {
                                    return  Math.round(dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2 * Math.PI) * 100) * 10) / 10 + '%';
                                })
                            })

                    Chart.render();
                });

                d3.select('#Voice').on('click', function () {
                    usage_cat.filter("Voice");
                    dc.redrawAll();
                });

                d3.select('#Data').on('click', function () {
                    usage_cat.filter("Data");
                    dc.redrawAll();
                });

                d3.select('#s4').on('click', function () {
                    timewindow.filter("00-04");
                    dc.redrawAll();
                });
                d3.select('#s408').on('click', function () {
                    timewindow.filter("04-08");
                    dc.redrawAll();
                });
                d3.select('#s812').on('click', function () {
                    timewindow.filter("08-12");
                    dc.redrawAll();
                });
                d3.select('#s1216').on('click', function () {
                    timewindow.filter("12-16");
                    dc.redrawAll();
                });
                d3.select('#s1620').on('click', function () {
                    timewindow.filter("16-20");
                    dc.redrawAll();
                });
                d3.select('#s2024').on('click', function () {
                    timewindow.filter("20-24");
                    dc.redrawAll();
                });

            </script>

        </div>
    </body>
</html>

一切都很好。甚至是drop down选项。

当我点击drop down下的值时，它会在pie chart中选择相应的值。现在，当我再次单击相同的drop down值时，它应该取消选择饼图中的值。

任何人都可以帮助我吗？

Answer 1

首先，为什么不使用点击处理程序更聪明一点？

而不是

 d3.select('#s812').on('click', function () {
      timewindow.filter("08-12");
      dc.redrawAll();
});

对于每个选项，您可以将btn-secondery的属性设置为过滤器值，如下所示：

 <div class="dropdown-content usage_cat">
     <a href="#" class="btn btn-secondary" filter='00-04' type="button"  id="s4">0-4</a>
      <a href="#"class="btn btn-secondary" filter='04-08' type="button"  id="s408">4-8</a>
      <a href="#"class="btn btn-secondary" filter='08-12' type="button"  id="s812">8-12</a>
      <!--etc....--->
  </div>

然后你可以使用这样一个函数：

$('.usage_cat').on('click','.btn-secondary',function(){
    if($(this).hasClass('active'){ // this is the active filter - cancel it
         //clear filters - not sure how :-)
         dc.redrawAll();
         $(this).removeClass('active');
    }else{
       $('.active').removeClass('active'); //clear all the other 'active'
       $(this).addClass('active') // give this 'active' class
       var filter = $(this).attr('filter'); // get the 'filter' attribute from node
       usage_cat.filter(filter);
       dc.redrawAll();
    }
})

这仅对usage_cat过滤有效，但我希望这可以让你开始，你可以自己完成其余的

Answer 2

如何设置变量来切换值

创建一个名为

的变量

var currentFilter =“”

并且每个click功能都将使用此变量。代码应该改变：

d3.select('#Voice').on('click', function(){
usage_cat.filter("Voice");
dc.redrawAll();
});

类似的东西：

...
d3.select('#Voice').on('click', function(){
if(currentFilter !== "Voice")
    currentFilter = "Voice"
else{
    currentFilter = ""
}
usage_cat.filter(currentFilter);
dc.redrawAll();
});
...

当然，您可以进行更多重构以彻底消除重复。

P.S。您的“运行代码段”不起作用。我不知道这是否只适合我。

如何取消选择下拉列表单击？

2 个答案: