Javascript 形状散点图的不同着色

我刚刚开始使用d3.js和SVG进行一个项目。 我下面的例子作为参考。 为了从外部JSON文件中获取数据，我修改了代码，并且我希望根据特定值的范围为箭头提供4种不同的颜色（如果我没有问题，可以通过简单的条件实现）。 到目前为止，我还没能做到这一点。在if条件下，颜色似乎发生了变化，但并不像预期的那样（例如，我使用黑色，它比以前稍微亮一点，但不是黑色）。有什么建议吗？到目前为止，我的代码是这样的：

var color_20c = d3.scale.category20c();
....................... 
... SOME OTHER CODE ...
.......................

var session_data = [];
$.each( punchcard_data, function( playerIndex, player ) {

       $.each( player.SessionData, function( sessionIndex, val ) {
        var rotation;
        var color_fill;

         switch (val.direction) {
              case "UP":
                color_fill="#31a354"    ;   
                rotation="";
                break;
              case "DOWN":
                rotation="rotate(-180)"; 
                break;
              case "LEFT":
                rotation="rotate(-90)"; 
                break;
              case "RIGHT":
                rotation="rotate(90)"; 
                break;
            }
        session_data.push({
                x: val.time,
                y:playerIndex,
                direction:rotation,
                color_fill:color_fill

            });


        });
});

然后我有

... Some other code ... 
.style("fill", function(d) { return color_20c(d.color_fill); })

---

如果需要，我可以提供代码的其余部分。

删除色标并直接应用颜色将解决您的问题。颜色比例将标量数字映射到颜色。例如：1到红色，2到黄色，等等。既然你已经知道颜色，那么你就不需要使用颜色刻度。

你也在更改笔划颜色吗？如果你已经有了颜色值，那么为什么要使用颜色比例呢？不，笔划颜色从一开始就是一样的。我是否必须移除色阶并在每次我想要的颜色时显式地给出它？你能给我举个例子吗？你能为你的查询设置一个JSFIDLE吗？好的，我通过移除色标使它工作。现在我对d3.js的HTML工具提示有一个不同的问题，你知道吗？