Javascript 如何更新棒棒糖图表的填充和排序值？

我试图改变我的棒棒糖图表中圆圈的填充，以及顺序（从最大到最小排序），这取决于用户单击的按钮。我已根据值成功更改了y轴，但在尝试更改其他参数时遇到问题

以下是我正在使用的csv：

media_outlet,positive,negative,balanced,informational,total
La Opinión,149,296,142,101,688
Wall Street Journal,137,118,125,79,459
Univision,226,484,225,159,1094
San Diego Union Tribune,60,24,18,17,119
Fox News,73,102,58,60,293
Washington Post,52,97,56,50,255
CNN,127,160,102,88,477
USA Today,32,23,14,22,91
The Daily Beast,9,50,13,10,82
Bloomberg,251,183,158,119,711
Fusion,48,86,54,49,237
NPR,20,30,12,14,76
Dallas Morning News,40,34,24,31,129
TIME,26,30,17,17,90
Forbes,97,56,72,37,262
Christian Science Monitor,19,15,21,7,62
NBC News,23,34,19,22,98
Huffington Post,232,344,219,85,880
New York TImes,90,129,74,62,355
Houston Chronicle,40,32,31,24,127
Los Angeles Times,66,75,45,45,231
San Antonio Express News,28,22,14,16,80
Arizona Daily Star,32,15,6,8,61
Vice News,17,169,44,12,242 

我的Javascript代码开始可视化，用总计对图表进行排序（我还没有弄清楚在单击按钮时如何或在代码中应用排序）：

const svg=d3
.选择（“#出口即”）
.append（'svg'）
.attr（'width'，width+margin.left+margin.right）
.attr（'height'，height+margin.top+margin.bottom）
.append（'g'）
.attr（'transform'，'translate（'+margin.left+'，'+margin.top+'））；
//初始化X轴
常数x=d3
.scaleBand（）
.范围（[0，宽度]）
.填充（1）；
const xAxis=svg.append（'g'）.attr（'transform'，'translate（0'，+height+'））；
//初始化Y轴
常数y=d3.scaleLinear（）.range（[height，0]）；
const yAxis=svg.append（'g'）.attr（'class'，'myYaxis'）；
//为给定变量创建/更新绘图的函数：
函数更新（selectedVar）{
//解析数据
d3.csv（'../data/media_trends.csv'）。然后（函数（数据）{
data.forEach（函数（d）{
d、 阳性=+d.阳性；
d、 负=+d.负；
d、 平衡=+d.平衡；
d、 信息性=+d.信息性；
d、 总计=+d.总计；
});
控制台日志（数据）；
data=data.sort（函数（a，b）{
如果（a.总计

我的html文件：

<div class="container">
      <div class="row justify-content-md-center">
        <div class="col-auto">
          <button class="positive p-2" onclick="update('positive')">
            Positive
          </button>
        </div>
        <div class="col-auto">
          <button class="negative p-2" onclick="update('negative')">
            Negative
          </button>
        </div>
        <div class="col-auto">
          <button class="balanced p-2" onclick="update('balanced')">
            Balanced
          </button>
        </div>
        <div class="col-auto">
          <button class="informational p-2" onclick="update('informational')">
            Informational
          </button>
        </div>
        <div class="col-auto">
          <button class="p-2" id="total-button" onclick="update('total')">
            Total
          </button>
        </div>
      </div>
    </div> 

肯定的
消极的
平衡的
信息的
全部的

---

我是d3新手，几个月前就开始编写代码了，任何关于如何改进或更改代码的指导都会对我帮助很大！谢谢你宝贵的帮助：）

关于颜色：

您的

如果
状况

.attr('fill', function(d) {
    if (d[selectedVar] === 'total') {
      return '#bfc0c1';
    } else if (d[selectedVar] === 'positive') {
      return '#5cdacc';
    } else if (d[selectedVar] === 'negative') {
      return '#ff1d34';
    } else if (d[selectedVar] === 'balanced') {
      return '#ffc750';
    } else {
      return '#ff8c50';
    }
});

。。。不正确，因为
总计
，
正
，
负
等。。。是属性名称，而不是值。它应该是
if（selectedVar==“total”）
等

最重要的是，你不需要那些
if
s。只需使用天平：

const colorScale = d3.scaleOrdinal()
    .domain(["positive", "negative", "balanced", "informational", "total"])
    .range(['#5cdacc', '#ff1d34', '#ffc750', '#ff8c50', '#bfc0c1']);

然后就简单到：

.attr('fill', colorScale(selectedVar));

关于排序问题：

使用属性本身进行排序：

data.sort(function(a, b) {
    return b[selectedVar] - a[selectedVar];
});

另外，
排序
就地排序，您不需要重新分配
数据

以下是您的更新代码：


const csv=`media_outlet，正面、负面、平衡、信息性、总计
拉奥皮尼翁，149296142101688
《华尔街日报》，137118125,79459
Univision，2264842251591094
圣地亚哥联合论坛报，60,24,18,17119
福克斯新闻，73102,58,60293
华盛顿邮报，52,97,56,50255
CNN,127160102,88477
今日美国，32,23,14,22,91
每日野兽，9,50,13,10,82
彭博社，251183158119711
Fusion，48,86,54,49237
NPR，20,30,12,14,76
达拉斯晨报，40,34,24,31129
时间，26,30,17,17,90
福布斯，97,56,72,37262
基督教科学箴言报，19,15,21,7,62
NBC新闻，23,34,19,22,98
赫芬顿邮报，23234421985880
纽约时报，90129,74,62355
休斯顿纪事报，40,32,31,24127
洛杉矶时报，66,75,45,45231
圣安东尼奥快报28,22,14,16,80
亚利桑那每日星报，32,15,6,8,61
副新闻，17169,44,12242`；
const data=d3.csvParse（csv，函数（d）{
d、 阳性=+d.阳性；
d、 负=+d.负；
d、 平衡=+d.平衡；
d、 信息性=+d.信息性；
d、 总计=+d.总计；
返回d；
});
常数宽度=500，
高度=300；
常量边距={
左:30,，
右:10,，
前10名，
底数：70
};
常量svg=d3
.选择（“正文”）
.append（'svg'）
.attr（'width'，width+margin.left+margin.right）
.attr（'高度'
data.sort(function(a, b) {
    return b[selectedVar] - a[selectedVar];
});