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

【问题标题】：Different Colorization on Scatterplot with Shapes具有形状的散点图上的不同着色
【发布时间】：2015-03-27 23:59:33
【问题描述】：

我刚刚开始使用 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); })

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

【问题讨论】：

你是否也在改变描边颜色？另外，如果您已经有了颜色值，那么为什么要使用色标？
没有从一开始就相同的笔触颜色。我是否必须删除色标并每次都明确给出我想要的颜色？可以举个例子吗？
你可以为你的查询设置一个 jsfiddle 吗？
好的，我通过删除色标让它工作了。现在我对带有 HTML 的 d3.js 工具提示有一个不同的问题，对此有什么想法吗？
stackoverflow.com/questions/18576402/…

标签： javascript svg d3.js scatter-plot

【解决方案1】：

删除色标并直接应用颜色将解决您的问题。色标将标量数字映射到颜色。例如：1 为红色，2 为黄色等。既然您已经知道颜色，则无需使用色标。

【讨论】：