[英]d3.js scatterplot with different colors and symbols - issues encountered
我正在尝试创建数百个数据点的散点图,每个数据点有大约5个不同的属性。 数据从.csv加载为对象数组,每个对象如下所示:
{hour: "02",yval: "63",foo: "33", goo:"0", bar:"1"},
我想显示具有以下属性的散点图:
bar
:
-circle表示bar=0
所有点,而three-down表示bar=1
那些(这是一个虚拟变量)。
foo
和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"]);
我可以单独完成这些,但是将所有内容组合在一起会为我创造问题。
我的代码具有可重现的数据在这里: http : //jsfiddle.net/qy5ohw0x/3/
问题
.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);
goo
颜色(灰色/橙色/红色),我手动将值映射到3种颜色: 首先定义var colors = ["grey", "orange", "red"];
然后在绘制数据点链的同时
.style("fill", function (d) { return colors[d.type]; })
这单独工作,但不是用不同的符号。
foo
链接第二种颜色.attr吗? d3.scale.linear().domain([0, 50]).range(["#87CEFF", "#0000FF"]);
如果可能的话可能会有用。 再次,jsfiddle在这里: http : //jsfiddle.net/qy5ohw0x/3/
谢谢!!
只需对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);
}
});
更新了小提琴 。
另外,我认为在这种情况下,直接d3
比nvd3
更直观。
nvd3.js简化得多
function prepareData (data) {
return [{
key: 'Group 1',
values: data.map(function (item) {
item.shape = item.bar == "0" ? 'circle' : 'triangle-down';
item.x = Number(item.hour);
item.y = Number(item.yval);
item.size = 0.1;
item.disabled = Math.random() > 0.4;
return item;
})
}]
}
nv.addGraph(function() {
var chart = nv.models.scatterChart()
.showDistX(false)
.showDistY(true)
.showLegend(false)
//Axis settings
chart.xAxis.tickFormat(d3.format('3.0f'));
chart.yAxis.tickFormat(d3.format('3.0f'));
d3.select('#chart svg')
.datum(prepareData(dataSet))
.call(chart)
// A bit hacky but works
var fooscale = d3.scale.linear().domain([0, 50]).range(["#87CEFF", "#0000FF"]);
function colorer(d) {
if (d.goo == '1')
return 'orange';
else if (d.goo == '2')
return 'red';
else if (d.goo == '0')
return fooscale(d.foo);
return 'gray';
}
d3.selectAll('.nv-point')
.attr({
'stroke': colorer,
'fill': colorer
})
nv.utils.windowResize(chart.update);
return chart;
});
见https://jsfiddle.net/qy5ohw0x/4/
PS很遗憾Nvd3缺少文档,所以请使用它的github代替
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.