javascript - 如何使用切换功能自动排序条形图

Question

我上传了一个 block (已修复) 您可以在其中切换排序功能。

我现在想要添加的是某种 if 语句，当复选框打开时，当它打开时，我希望在您更改年份或类别时自动排序，以及当您再次切换它会停止自动排序。

我想的很简单

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

在 update 函数中可以工作，但没有任何反应。

感谢任何帮助!

Answer 1

我开始回答您的直接问题，但很快意识到您的代码需要进行一些重构。您进行了过多的复制/粘贴操作以及冗余代码和绘制的内容过多。使用 d3 编码时，您应该尝试使用一个函数来完成所有绘图。

这是 code running .

这里是一个新的更新函数的片段来统治它们:

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