如何使用切换功能自动对条形图进行分类 [英] How to auto-sort a bar-chart with a toggle function

问题描述

我已经上传了 阻止 ( FIXED).您可以在其中切换排序功能.

I've uploaded a block (FIXED) where you can toggle a sorting function.

现在我要添加的是复选框选中时的某种if语句，当复选框选中时，我希望条形图在更改年份或类别时自动排序，并且在再次切换时它会停止自动排序.

What I want to add now is some kind of if statement when the checkbox is on, and when it is on I want the bars to sort automatically when you change year or category, and when you toggle it again it stops auto-sorting.

我认为很简单

if (document.getElementsByClassName('myCheckbox').checked) {
    change();
}

在update函数中可以正常工作，但是什么也没发生.

Within the update function would work but nothing happens.

感谢您的帮助！

推荐答案

我开始回答您的直接问题，但很快意识到您的代码需要一些重构.您使用冗余代码进行了太多的复制/粘贴，并且绘制了太多东西.当使用d3进行编码时，您应该尝试使用单个函数来完成所有绘图.

I started an answer your direct question, but soon realized that your code needed a bit of refactor. You had a bit too much copy/paste going on with redundant code and too many things drawing. When coding with d3 you should try for a single function that does all the drawing.

这是代码正在运行.

这是新的一个更新功能的代码片段，用于将它们全部统治:

Here's a snippet of the new one update function to rule them all:

function update() {

  file = d3.select('#year').property('value') == 'data2017' ? 'data.csv' : 'data2.csv';
  catInt = d3.select('#category').property('value');

    d3.csv(file, type, function(error,data) {

        if(error) throw error;

        var sortIndex = data.map(function(d){ return d.month});

        // Update domain
        y.domain([0, d3.max(data, function(d) {
                return d["Category" + catInt]; })
        ]).nice();

        // Update axis
        g.selectAll(".axis.axis--y").transition()
            .duration(750)
            .call(yAxis);
        g.selectAll(".axis.grid--y").transition()
            .duration(750)
            .call(yGrid);

        // Sums and averages
        let sumOfAll = d3.sum(data, function(d) { 
            return d["Category" + catInt];
        });
        let avgValue = d3.sum(data, function(d) { 
            return d["Category" + catInt];
        }) / data.length;

        //sort data
        data.sort( d3.select("#myCheckbox").property("checked")
            ? function(a, b) { return b["Category" + catInt] - a["Category" + catInt]; }
            : function(a, b) { return sortIndex.indexOf(a.month) - sortIndex.indexOf(b.month);})

        // set x domain
        x.domain(data.map(function(d) { return d.month; }));

        g.selectAll(".axis.axis--x").transition()
        .duration(750)
        .call(xAxis);

        // Update rectangles
        let bars = g.selectAll(".barEnter")
          .data(data, function(d){
            return d.month;
          });

        bars = bars
          .enter()
          .append("rect")
          .attr("class", "barEnter") // Enter data reference
          .attr("width", x.bandwidth())
          .merge(bars);

        bars.transition()
          .duration(750)
          .attr("height", function(d) { 
            return height - y(d["Category" + catInt]); 
          })
          .attr("x", function(d) { 
            return x(d.month); 
          })
          .attr("y", function(d) { 
            return y(d["Category" + catInt]); 
          });

    bars.exit().remove();

        // Update text on rectangles
        let textUpdate = g.selectAll(".textEnter")
          .data(data, function(d){
            return d.month;
          });

        textUpdate = textUpdate.enter()
        .append("text")
        .style("text-shadow","1px 1px #777")
        .attr("class", "textEnter") // Enter data reference
        .attr("text-anchor","middle")
        .attr("font-size",11)
        .attr("fill","#fff")
        .merge(textUpdate);

        textUpdate.transition()
            .duration(750)
            .attr("y", function(d) { 
                return y(d["Category" + catInt]) + 15; 
                })
            // Update text value
            .text( function(d) { 
                return d["Category" + catInt]; 
            })
            .attr("x", function(d) { 
            return x(d.month) + x.bandwidth()/2; 
        })

        // Update sum and avg value
        g.selectAll("#totalValue").transition()
            .duration(750)
            .text(sumOfAll + " Category " + catInt)
        g.selectAll("#avgValue").transition()
            .duration(750)
            .text(formatValue(avgValue))
    });
}  

这篇关于如何使用切换功能自动对条形图进行分类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！