我希望有人能帮助我理解如何修改x轴,尤其是y轴。我正在使用分布中天/小时的热图示例的修改,并在这个链接上有示例,
https://codepen.io/greaney/pen/xLGdBq
.x()
.xAxis()
我会出错,否则,其他一切都很好。我认为我使用的是正确的dc版本。js和交叉过滤器。具有d3.js的v3的js。我非常感谢您的帮助。非常感谢。
var data = [];
var jdata;
var baseTemp;
//d3.json('/camp/datavis/heat/heat.json', function(error,jdata) {
d3.json('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json', function(error,jdata) {
console.log("jdata", jdata);
baseTemp = jdata.baseTemperature;
data = jdata.monthlyVariance;
data.forEach(function (d) {
d.variance = +d.variance;
d.temp = baseTemp + d.variance;
d.year = +d.year;
d.month = +d.month;
//console.log("d.temp", d.temp);
});
var x = d3.scale.ordinal()
.domain(data.map(function (d) { return d.name; }))
//.rangePoints([0, width], 1);
.rangePoints([0, 20], 1);
//.rangePoints([0, chart.width], 1);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickValues(data.map( function(d,i)
{
//if(i % 9 ===0 ) {
if(i % 10 ===0 ) {
return d.year;
//return d.name;
}
})
.filter(function (d)
{
if ((d !== undefined) && (d % 10)) {
console.log("what d here", d);
return !!d;
}
}
));
var chart = dc.heatMap("#test");
console.log("chart",chart);
//console.log("chart",chart.__dcFlag);
//console.log("chartgroup",chart.chartGroup.Scopes);
//chart.xUnits(dc.units.fp.precision(0.1));
//dc.heatMap._chart(function (m) {
//console.log("what in m", m); });
//.x(d3.scale.linear().domain([0,25]).range([0,86]));
//chart.x(d3.scale.linear().domain([0,33]).range([0,86]))
// .y(d3.scale.linear().domain([0,80]));
var ndx = crossfilter(data),
runDim = ndx.dimension(function (d) {
//return [d.month, d.year, d.variance, d.temp];
//return [d.year, d.month, d.variance, d.temp];
return [d.year, d.month];
//return [d.month, d.year];
//return [d.temp, d.year, d.month, d.variance];
}),
runGroup = runDim.group().reduceSum(function (d) {
//return +d.temp;
return d.temp;
});
//chart.width(45 * 20 + 80)
// .height(45 * 5 + 40)
//chart.width(15 * 20 + 80)
chart.width(15 * 40 + 80)
//.x(d3.scale.ordinal())
//.xUnits(dc.units.ordinal)
.height(35 * 10 + 40)
.dimension(runDim)
.group(runGroup)
.ordering(function (d) {
console.log("order d", d);
var order = {
//'Jan': 1, 'Feb': 2, 'Mar': 3, 'Apr': 4,
//'May': 5, 'Jun': 6, 'Jul': 7, 'Aug': 8,
//'Sep': 9, 'Oct': 10, 'Nov': 11, 'Dec': 12
1: 'january', 2 : 'feb', 3: 'Mar', 4: 'Apr',
5:'May', 6:'Jun', 7: 'Jul', 8: 'Aug',
9:'Sep', 10:'Oct',11: 'Nov', 12: 'Dec'
};
console.log("order[0]", order[0]);
//return order[d.key];
return order[d.value];
})
.keyAccessor(function (d) {
//console.log('keys', d.key);
return +d.key[0];
})
.valueAccessor(function (d) {
return +d.key[1];
})
//.gap(20)
.colorAccessor(function (d) {
//console.log('value', d.value);
return +d.value;
})
.title(function (d) {
return "Month: " + d.key[1] + "\n" +
"Year: " + d.key[0] + "\n" +
"Temperature: " + d.value + "deg F";
})
.colors(["#006837", "#1a9860", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"])
.calculateColorDomain()//
//.x(d3.time.scale().domain([new Date(2012, 4, 20), new Date(2012, 07, 15)]))
// .xUnits(d3.time.years)
;
/*
var x = d3.scale.ordinal()
.domain(data.map(function (d) { return d.name; }))
//.rangePoints([0, width], 1);
.rangePoints([0, chart.width], 1);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickValues(data.map( function(d,i)
{
if(i % 9 ===0 ) {
return d.name;
//return d.year;
}
})
.filter(function (d)
{
console.log("what d here", d);
return !!d;
}
));
*/
d3.selectAll("chart").attr(function (d) {
console.log("-*****-what here text", d) });
chart.selectAll("chart").select("g").attr(function (d) {
console.log("-------what here text", d) });
chart.render();
});