d3.js具有不同颜色和符号的散点图 - 遇到的问题 [英] d3.js scatterplot with different colors and symbols - issues encountered

问题描述

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

I am trying to create a scatterplot of hundreds of datapoints, each with about 5 different attributes. The data is loaded from a .csv as an array of objects, each of which looks like this:

{hour： 02，yval：63，foo：33，goo：0，bar：1}，

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

I want to display the scatterplot with the following attributes:

的形状吧：

Shape for bar:

-circle表示 bar = 0 的所有点，以及表示的三角形c $ c> bar = 1 （这是一个虚拟变量）。

-circle to represent all points where bar=0, and a triangle-down to represent those where bar=1 (this is a dummy variable).

foo的颜色和 goo ：

Color for foo and goo:

• 所有积分从灰色开始。 goo 分类为值[0,1,2]，而 foo 是定量的，范围为0-50。 foo和goo是互斥的，因此只有其中一个具有值。换句话说，对于每个数据点， foo = 0 或 goo = 0 。


• goo = 1 的积分应为橙色; goo = 2 的积分应为红色。


• foo 应该映射从浅蓝色到深蓝色的线性色标，即 d3.scale.linear（）。domain（[0,50]）。range（[＃87CEFF，＃0000FF]） ;

• All points start as grey. goo is categorical with values [0,1,2] while foo is quantitative with a range from 0-50. foo and goo are mutually exclusive, so only one of them has a value. In other words, for each data point either foo=0 or goo=0.
• Points with goo=1 should be orange; points with goo=2 should be red.
• foo should be mapped onto a linear color scale from light blue to dark blue, ie d3.scale.linear().domain([0, 50]).range(["#87CEFF", "#0000FF"]);

我可以单独完成这些工作，但是将所有内容组合在一起会给我带来麻烦。

I can do each of these individually, but defining everything together is creating issues for me.

我的代码具有可重现的数据，请访问： http：// jsfiddle.net/qy5ohw0x/3/

My code with reproducible data is here: http://jsfiddle.net/qy5ohw0x/3/

问题

• 对于符号，我试过

.append（svg：path ）

.attr（d，d3.svg.symbol（））

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

which did not work. I tried a different approach altogether, but this did not map the values correctly:

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);

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


• For the goo colors (grey/orange/red), i mapped the values to the 3 colors manually:

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

然后绘制数据点链时

.style（fill，function（d）{return colors [d.type];}）

这单独使用，但不是用不同的符号。

This worked alone, but not with the different symbols.



• 最后，我可以链接第二种颜色.attr为 foo ？ d3.scale.linear（）。domain（[0,50]）。range（[＃87CEFF，＃0000FF]）; 可能会起作用是可能的。


• Finally, can i chain a second color .attr for foo? d3.scale.linear().domain([0, 50]).range(["#87CEFF", "#0000FF"]); would probably work if this is possible.

再次，jsfiddle在这里： http://jsfiddle.net/qy5ohw0x/3/

Again, the jsfiddle is here: http://jsfiddle.net/qy5ohw0x/3/

谢谢!!

推荐答案

在每个属性的函数（d）中进行所有逻辑和比较。

Just do all the logic and comparisons in a function(d) for each attribute.

首先设置一些帮手：

// 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"]);

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

Then append a path for each symbol:

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);
        }
    });

更新小提琴。

在旁注中，我实际上认为直接 d3 是这样的对于这种情况，比 nvd3 更直观。

On a side note, I actually think straight d3 is way more intuitive than nvd3 for this situation.

这篇关于d3.js具有不同颜色和符号的散点图 - 遇到的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！