Question

我刚开始使用d3.js和SVG开发项目。我将以下示例作为参考http://bl.ocks.org/mbostock/3244058#data.csv。我已修改代码以便从外部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); })

如有必要，我可以提供其余的代码。

Answer 1

删除色标并直接应用颜色会解决您的问题。色标会将标量数字映射到颜色。例如：1到红色，2到黄色等。由于您已经知道颜色，因此您不需要使用色标。

具有形状的散点图的不同着色

1 个答案: