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

Question

我刚开始使用 d3.js 和 SVG 进行一个项目。我以下面的例子作为参考http://bl.ocks.org/mbostock/3244058#data.csv。我已经修改了代码以便从外部 JSON 文件获取数据，并且我希望根据特定值的范围为箭头设置 4 种不同的颜色（可以通过简单的 if 条件来实现我没有问题接着就，随即）。到目前为止，我无法做到这一点。颜色似乎在 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对黄色等。既然你已经知道了颜色，那么就不需要使用色标了。

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

Different Colorization on Scatterplot with Shapes

javascript

svg

scatter-plot

d3.js