我对使用以下结果有心理障碍:
.rollup(function(leaves) { return leaves.length;})
作为散点图中圆的半径。我的完整代码(和示例数据)在这里https://plnkr.co/edit/Cwuce6inLV5jouCWTFfN
散布的静态值为5,但我想根据d3.nest中的.rollup使用值,正如我在其他SO问题中所解释的那样:Capturing leaves.length value from d3.nest
我认为我在这部分代码中缺少一个关键概念:
d3.tsv("etds_small.tsv", function(error, dataset) {
dataset.forEach(function(d) {
if(deptlist.indexOf(d.dept) == -1) deptlist.push(d.dept);
if(years.indexOf(d.year) == -1) years.push(d.year);
})
var deptYearCount = d3.nest()
//.key(function(d) { return d.college;} )
.key(function(d) { return d.dept})
.key(function(d) { return d.year })
.rollup(function(leaves) { return leaves.length;})
.map(dataset);
console.log(dataset); // retains the college, dept, and year labels
console.log(deptYearCount); // replaces labels with "key"
x.domain(years.sort(d3.ascending));
y.domain(deptlist.sort(d3.ascending));
//console.log(y.domain());
//console.log(x.domain());
svg.selectAll(".dot")
.data(dataset) //should this be deptYearCount from the d3.nest above?
.enter().append("circle")
.attr("class", "dot")
.attr("r", 5) // Would like to use length (from d3.nest) as radius
//.attr("r", function(d) {return d.values.length*1.5;}) works with .data(debtYearCount)
.style("opacity", 0.3)
.style("fill", "#e31a1c" )
.attr("cx", function(d) {
return x(d.year);
})
.attr("cy", function(d) {
return y(d.dept);
});
答案 0 :(得分:2)
尝试半径:
.attr("r", function(d) {return Object.keys(deptYearCount[d.dept]).length*1.5;})
因为您使用的是.map(dataset)
而不是.entries(dataset)
,所以d3.next()返回的是一个大对象而不是一个对象数组。该one-big-object不包含名为values
的属性。
更新说明:
首先,查看对象deptYearCount
的结构。它具有Earth Sciences.
,Education.
等属性名称。
我们的d3数据正在迭代一组对象。每个对象的属性dept
看起来都像Earth Sciences.
,Education.
等。
因此,deptYearCount[d.dept]
让我们找到deptYearCount
内的正确属性。
例如,在我们迭代的一轮中,我们正在查看deptYearCount["Education."]
。结果是另一个具有2007
,2008
等属性的对象。因此,deptYearCount["Education."]
中的属性数是我们想要的半径值。
我们如何找到deptYearCount["Education."]
的属性数量?一种方法是Object.keys(someObject)
功能。它返回一个与属性名称相对应的字符串数组,我们只需要它.length
。