我在尝试导入 geojson(这似乎可行)但随后将其传递到 crossfilter 时遇到问题 - 似乎没有数据加载到 crossfilter 对象中。
我在这里做了一个 jsfiddle:https://jsfiddle.net/Svarto/pLyhg9Lb/
当我尝试 console.log(ndx),即 crossfilter 时,我只得到没有加载任何东西的 crossfilter 对象(当我尝试 console.log 任何类型的组时也是如此:
在将带有加载数据的交叉过滤器写入控制台时,我会期望得到某种数据。当我尝试用数据绘制直方图时,问题变得很明显 - 只有 2 个柱子不是我预期的。
代码是这样的:
d3.json("https://dl.dropboxusercontent.com/s/7417jc3ld25i0a4/srealitky_geojson.json?dl=1", function(err,json){
var h = 300;
var w = 350;
var ndx = crossfilter();
console.log(json.features);
ndx.add(json.features);
console.log(ndx);
var all = ndx.groupAll();
var yieldDimension = ndx.dimension(function(d){
return d.properties.yields
});
var yieldGroup = yieldDimension.group().reduceCount();
console.log(yieldGroup);
var priceDimension = ndx.dimension(function(d){
return d.properties.price
});
var priceGroup = priceDimension.group().reduceCount();
var barChart = dc.barChart("#yieldChart");
barChart.width(350)
.height(300)
.x(d3.scale.linear().domain([0,30]))
.brushOn(false)
.dimension(yieldDimension)
.group(yieldGroup);
dc.renderAll();
}
最佳答案
正如上面@Nilo 所指出的,问题不在于读取 json 数据,而在于坐标的设置。
您可能希望通过舍入到 0.01 的精度来对数据进行分箱:
var yieldGroup = yieldDimension.group(function(yields) {
return Math.floor(yields*100)/100;
}).reduceCount();
然后清理边距,添加elasticX
和elasticY
,并指定要匹配的xUnits
,我们得到一个很好的直方图(带有正常分布):
barChart
.margins({left: 50, top: 5, right: 0, bottom: 20})
.x(d3.scale.linear())
.elasticX(true).elasticY(true)
.xUnits(dc.units.fp.precision(0.01))
关于javascript - dc.js 和 crossfilter - 根本不读取 json,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48220235/