如何更改Voronoi图中单行的颜色？

Question

我正在使用D3 voronoi。我有几行，并希望只有一行具有特定的颜色，而其他所有颜色都有不同的颜色。我尝试过使用if语句，但无济于事。以下是我的代码：

风格：

    .axis--y path {
      display: none;
      fill: none;
      stroke: #17BED5;
      stroke-width: 1.0;

    }

    .axis--y line { 
      stroke: lightgrey; 
      opacity: 1
    }

    .cities {
      fill: none;
      stroke: #000000;
      stroke-linejoin: round;
      stroke-linecap: round;
      stroke-width: 1px;
    }

    .city--hover {
      stroke: #4575b4;
      stroke-width: 2px;
    }

    .focus text {
      text-anchor: middle;
      text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
    }

    .voronoi path {
      fill: none;
      pointer-events: all;
    }

    .voronoi--show path {
      stroke: red;
      stroke-opacity: 0.2;
    }

    #form {
      position: absolute;
      top: 20px;
      right: 30px;
    }



    </style>

JavaScript的：

    var years, 
        yearKeys,
        yearParse = d3.timeParse("%Y");

    //Sets out the margins of the chart frm the edges of the page/screen.
    var svg = d3.select("svg"),
        margin = {top: 20, right: 30, bottom: 30, left: 40},
        width = svg.attr("width") - margin.left - margin.right,
        height = svg.attr("height") - margin.top - margin.bottom,
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    //Now we define the x and y axes and their respective scales. X will be the date, and y will be the unemployment rates.

    var x = d3.scaleTime()
        .range([0, width]);

    var y = d3.scaleLinear()
        .range([height, 0]);

    var voronoi = d3.voronoi()
        .x(function(d) { 
          return x(d.date); })
        .y(function(d) { 
          return y(d.value); })
        .extent([[-margin.left, -margin.top], [width + margin.right, height + margin.bottom]]);

    //And we set out the values of our lines.
    var line = d3.line()
        .x(function(d) { 
          return x(d.date); })
        .y(function(d) { 
          return y(d.value); });

    //Now we call our chart.
    d3.csv("data/eloVoronoi.csv", type, function(error, data) {
      if (error) throw error;

      x.domain(d3.extent(years));
      y.domain([1500, d3.max(data, function(c) { 
        return d3.max(c.values, function(d) { 
          return d.value; }); })]).nice();

    //We tell the computer that we want our x-axis to be at the bottom. 
    g.append("g")
          .attr("class", "axis axis--x")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x));


    //And the y axis on the left, with some style attributes.
    g.append("g")
          .attr("class", "axis axis--y")
          .call(d3.axisLeft(y)
          .ticks(6)
          .tickSize(-width))
        .append("text")
          .attr("transform", "rotate(360)")
          .attr("x", 4)
          .attr("y", -14)
          .attr("dy", "1em")
          .style("text-anchor", "start")
          .style("fill", "black")
          .style("font-weight", "bold")
          .text("Elo Rating");

    g.append("g")
          .attr("class", "cities")
        .selectAll("path")
        .data(data)
        .enter().append("path")
          .attr("d", function(d) { d.line = this;

            return line(d.values); });

    var focus = g.append("g")
          .attr("transform", "translate(-100,-100)")
          .attr("class", "focus");

    focus.append("circle")
          .attr("r", 3.5);

      focus.append("text")
          .attr("y", -10);

    //This is where we group all the vornoi together so tht we can apply the mouseovers all together, instead of one by one.
    var voronoiGroup = g.append("g")
          .attr("class", "voronoi");

    //The mouseovers/outs.
    voronoiGroup.selectAll("path")
        .data(voronoi.polygons(d3.merge(data.map(function(d) { 
          return d.values; }))))
        .enter().append("path")
          .attr("d", function(d) { 
            return d ? "M" + d.join("L") + "Z" : null; })
          .on("mouseover", mouseover)
          .on("mouseout", mouseout);

    //
    d3.select("#show-voronoi")
          .property("disabled", false)
          .on("change", function() { voronoiGroup.classed("voronoi--show", this.checked); });

    //Helper function to assist in the mouseover.
    function mouseover(d) {
        d3.select(d.data.city.line).classed("city--hover", true);
        d.data.city.line.parentNode.appendChild(d.data.city.line);
        focus.attr("transform", "translate(" + x(d.data.date) + "," + y(d.data.value) + ")");
        focus.select("text").text(d.data.city.name);
      }

    //And a helper function for the mouseout.
    function mouseout(d) {
        d3.select(d.data.city.line).classed("city--hover", false);
        focus.attr("transform", "translate(-100,-100)");
      }
    });



    //Now we use an if statement to call our chart onto the page. 
    function type(d, i, columns) {
      if (!years) yearKeys = columns.slice(1), years = yearKeys.map(yearParse);
      var c = {name: d.name.replace(/ (msa|necta div|met necta|met div)$/i, ""), values: null};
      c.values = yearKeys.map(function(k, i) { 
        return {city: c, date: years[i], value: d[k] / 1}; });
      return c;
    }