更改多个SVG的颜色

Question

我目前正在学习D3。我有一个堆积的区域图，显示了一个公司来自4个不同地区的销售-“西部”，“南部”，“东北”和“中西部”。 每个都有不同的颜色。 我正在尝试更改每个按钮的颜色，但是由于我还很新，我的javascript并不是很好，并且很难找到它。

请问有人可以帮忙吗？

这是堆积面积图代码-

create procedure searchGenre (
 genre_input in varcharw
) as
    product_name VARCHAR2(32);
    product_year VARCHAR2(32);
    product_single_price VARCHAR2(32);
    performer_name VARCHAR2(32);
    genre_style VARCHAR2(32);
    typep_label VARCHAR2(32);
    company_name VARCHAR2(32);
    cursor c1 is 
    select product.name--, product.year, product.single_price,performer.name, genre.style, typep.label,company.name
    from product
    join genre
    on  product.genre_genreid = genre.genreid
    join  performer
    on product.performer_performerid = performer.performerid
    join typep
    on product.type_type_id = typep.type_id
    join company
    on product.companyid = company.companyid
    where genre.style like &genre_input and (product.type_type_id = 1 or product.type_type_id =3);


begin 
    open c1;
    loop
        fetch c1 into product_name;
        exit when c1%not_found; -- exit condition

        dbms_output_line(product_name);

        -- and so forth  . . . .

    end loop;
end;

我相信它通过给它一个更新所有区域的功能来为每个区域分配颜色，对吗？ -

/*
*    stackedAreaChart.js
*/

StackedAreaChart = function(_parentElement){
    this.parentElement = _parentElement;

    this.initVis();
};

StackedAreaChart.prototype.initVis = function(){
    var vis = this;

    vis.margin = { left:80, right:100, top:50, bottom:40 };
    vis.height = 370 - vis.margin.top - vis.margin.bottom;
    vis.width = 800 - vis.margin.left - vis.margin.right;

    vis.svg = d3.select(vis.parentElement)
        .append("svg")
        .attr("width", vis.width + vis.margin.left + vis.margin.right)
        .attr("height", vis.height + vis.margin.top + vis.margin.bottom);
    vis.g = vis.svg.append("g")
        .attr("transform", "translate(" + vis.margin.left + 
            ", " + vis.margin.top + ")");

    vis.t = () => { return d3.transition().duration(1000); }

    vis.color = d3.scaleOrdinal(d3.schemePastel1);

    vis.x = d3.scaleTime().range([0, vis.width]);
    vis.y = d3.scaleLinear().range([vis.height, 0]);

    vis.yAxisCall = d3.axisLeft()
    vis.xAxisCall = d3.axisBottom()
        .ticks(4);
    vis.xAxis = vis.g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + vis.height +")");
    vis.yAxis = vis.g.append("g")
        .attr("class", "y axis");

    vis.stack = d3.stack()
        .keys(["west", "south", "northeast", "midwest"]);

    vis.area = d3.area()
        .x(function(d) { return vis.x(parseTime(d.data.date)); })
        .y0(function(d) { return vis.y(d[0]); })
        .y1(function(d) { return vis.y(d[1]); });

    vis.addLegend();

    vis.wrangleData();
};


StackedAreaChart.prototype.wrangleData = function(){
    var vis = this;

    vis.variable = $("#var-select").val()

    vis.dayNest = d3.nest()
        .key(function(d){ return formatTime(d.date); })
        .entries(calls)

    vis.dataFiltered = vis.dayNest
        .map(function(day){
            return day.values.reduce(function(accumulator, current){
                accumulator.date = day.key
                accumulator[current.team] = accumulator[current.team] + current[vis.variable]
                return accumulator;
            }, {
                "northeast": 0,
                "midwest": 0,
                "south": 0,
                "west": 0
            })
        })

    vis.updateVis();
};


StackedAreaChart.prototype.updateVis = function(){
    var vis = this;

    vis.maxDateVal = d3.max(vis.dataFiltered, function(d){
        var vals = d3.keys(d).map(function(key){ return key !== 'date' ? d[key] : 0 });
        return d3.sum(vals);
    });

    // Update scales
    vis.x.domain(d3.extent(vis.dataFiltered, (d) => {  return parseTime(d.date); }));
    vis.y.domain([0, vis.maxDateVal]);

    // Update axes
    vis.xAxisCall.scale(vis.x);
    vis.xAxis.transition(vis.t()).call(vis.xAxisCall);
    vis.yAxisCall.scale(vis.y);
    vis.yAxis.transition(vis.t()).call(vis.yAxisCall);

    vis.teams = vis.g.selectAll(".team")
        .data(vis.stack(vis.dataFiltered));

    // Update the path for each team
    vis.teams.select(".area")
        .attr("d", vis.area)

    vis.teams.enter().append("g")
        .attr("class", function(d){ return "team " + d.key })
        .append("path")
            .attr("class", "area")
            .attr("d", vis.area)
            .style("fill", function(d){
                return vis.color(d.key)
            })
            .style("fill-opacity", 0.5)
};


StackedAreaChart.prototype.addLegend = function(){
    var vis = this;

    var legend = vis.g.append("g")
        .attr("transform", "translate(" + (50) + 
                    ", " + (-25) + ")");

    var legendArray = [
        {label: "Northeast", color: vis.color("northeast")},
        {label: "West", color: vis.color("west")},
        {label: "South", color: vis.color("south")},
        {label: "Midwest", color: vis.color("midwest")}
    ]

    var legendCol = legend.selectAll(".legendCol")
        .data(legendArray)
        .enter().append("g")
            .attr("class", "legendCol")
            .attr("transform", (d, i) => {
                return "translate(" + (i * 150) + ", " + (0) + ")"
            });

    legendCol.append("rect")
        .attr("class", "legendRect")
        .attr("width", 10)
        .attr("height", 10)
        .attr("fill", d => { return d.color; })
        .attr("fill-opacity", 0.5);

    legendCol.append("text")
        .attr("class", "legendText")
        .attr("x", 20)
        .attr("y", 10)
        .attr("text-anchor", "start")
        .text(d => { return d.label; }); 
}