具有不同颜色和符号的 d3.js 散点图 - 遇到的问题

我正在尝试创建数百个数据点的散点图，每个数据点都有大约 5 个不同的属性。 数据作为对象数组从 .csv 加载，每个对象如下所示：

{hour: "02",yval: "63",foo: "33", goo:"0", bar:"1"},

我想显示具有以下属性的散点图：

形状为bar:

- 圆圈代表所有点bar=0，和一个向下的三角形来表示那些bar=1（这是一个虚拟变量）。

颜色为foo and goo:

• 所有点都以灰色开始。goo是具有值 [0,1,2] 的分类，而foo是定量的，范围是0-50。foo 和 goo 是互斥的，因此只有其中之一具有值。换句话说，对于每个数据点foo=0 or goo=0.
• 点与goo=1应该是橙色的；点与goo=2应该是红色的。
• foo应映射到从浅蓝色到深蓝色的线性色标，即d3.scale.linear().domain([0, 50]).range(["#87CEFF", "#0000FF"]);

我可以单独完成其中每一项，但将所有内容一起定义会给我带来问题。

我的具有可重现数据的代码在这里：http://jsfiddle.net/qy5ohw0x/3/ http://jsfiddle.net/qy5ohw0x/3/

Issues

• 对于符号，我尝试过

.append("svg:path")

.attr("d", d3.svg.symbol())

这不起作用。我尝试了完全不同的方法，但这没有正确映射值：

var series = svg.selectAll("g.series") 
    .data(dataSet, function(d, i) { return d.bar; })
    .enter() 
    .append("svg:g")

series.selectAll("g.point")
    .data(dataSet)
    .enter()
    .append("svg:path")
    .attr("transform", function(d, i) { return "translate(" + d.hour +  "," + d.yval + ")"; })
    .attr("d", function(d,i, j) { return d3.svg.symbol().type(symbolType[j])(); })
    .attr("r", 2);

• For the goo颜色（灰色/橙色/红色），我手动将值映射到 3 种颜色：

首先定义var colors = ["grey", "orange", "red"];

然后在绘制数据点链时

.style("fill", function (d) { return colors[d.type]; })

这单独有效，但不适用于不同的符号。

• 最后，我可以链接第二种颜色 .attr 吗foo? d3.scale.linear().domain([0, 50]).range(["#87CEFF", "#0000FF"]);如果可能的话，可能会起作用。

同样，jsfiddle 在这里：http://jsfiddle.net/qy5ohw0x/3/ http://jsfiddle.net/qy5ohw0x/3/

Thanks!!

只需在一个中完成所有逻辑和比较function(d)对于每个属性。

首先设置一些助手：

// symbol generators
var symbolTypes = {
    "triangleDown": d3.svg.symbol().type("triangle-down"),
    "circle": d3.svg.symbol().type("circle")
};

// colors for foo
var fooColors = d3.scale
    .linear()
    .domain([0, 50])
    .range(["#87CEFF", "#0000FF"]);

然后为每个符号附加一个路径：

svg.selectAll("path")
    .data(dataSet)
    .enter().append("path")
    .attr("class", "dot")
    // position it, can't use x/y on path, so translate it
    .attr("transform", function(d) { 
        return "translate(" + (x(d.hour) + (Math.random() * 12 - 6)) + "," +  y(d.yval) + ")"; 
    })
    // assign d from our symbols
    .attr("d", function(d,i){
        if (d.bar === "0") // circle if bar === 0
            return symbolTypes.circle();
        else
            return symbolTypes.triangleDown();
    })
    // fill based on goo and foo
    .style("fill", function(d,i){
        if (d.goo !== "0"){
            if (d.goo === "1")
                return "red";
            else
                return "orange";
        }else{
            return fooColors(d.foo);
        }
    });

Updated fiddle http://jsfiddle.net/qy5ohw0x/5/.

顺便说一句，我实际上直接思考d3比更直观nvd3对于这种情况。