chart.xAxis .tickFormat格式设置不起作用
chart.xAxis .tickFormat格式设置不起作用
提问于 2014-02-01 02:30:27
我是d3的新手，但我已经花了5个小时试图弄清楚如何让它工作，我已经尝试了上千种组合。
这是我想使用的JSON：
var histcatexplong = [
{
"key" : "Consumer Discretionary" ,
"values" : [ [ 20131201 , 27.38478809681],[ 20131202 , 27.38478809681], [ 20131203 , 27.38478809681]]
} ,
{
"key" : "Consumer Staples" ,
"values" : [ [ 20131201 , 7.2800122043237],[ 20131202 , 27.38478809681], [ 20131203 , 27.38478809681]]
} ];其中日期的格式类似于YYYYMMDD。
这是迄今为止我最后一次孤注一掷的审判：
chart.xAxis
.tickFormat(function(d) {
var startDate = toString(d)
var parser = d3.time.format("%Y%m%d");
var formatter = d3.time.format("%x");
var startDateString = formatter(parser.parse(startDate));
return startDateString});如有任何帮助，欢迎光临！
它在这里不起作用的完整代码：
<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/interactiveLayer.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/scatter.js"></script>
<script src="../src/models/stackedArea.js"></script>
<script src="../src/models/stackedAreaChart.js"></script>
<script>
// for testing single data point
var histcatexplong = [
{
"key" : "Consumer Discretionary" ,
"values" : [ [ 20131201 , 27.38478809681],[ 20131202 , 27.38478809681], [ 20131203 , 27.38478809681]]
} ,
{
"key" : "Consumer Staples" ,
"values" : [ [ 20131201 , 7.2800122043237],[ 20131202 , 27.38478809681], [ 20131203 , 27.38478809681]]
} ];
.map(function(series) {
series.values = series.values.map(function(d) {
return { x: d[0], y: d[1] }
});
return series;
});
*/
//an example of harmonizing colors between visualizations
//observe that Consumer Discretionary and Consumer Staples have
//been flipped in the second chart
var colors = d3.scale.category20();
keyColor = function(d, i) {return colors(d.key)};
nv.addGraph(function() {
chart = nv.models.stackedAreaChart()
// .width(600).height(500)
.useInteractiveGuideline(true)
.x(function(d) { return d[0] })
.y(function(d) { return d[1] })
.color(keyColor)
.transitionDuration(300);
//.clipEdge(true);
// chart.stacked.scatter.clipVoronoi(false);
chart.xAxis
.tickFormat(function(d) {
var startDate = toString(d)
var parser = d3.time.format("%Y%m%d");
var formatter = d3.time.format("%x");
var startDateString = formatter(parser.parse(startDate));
return startDateString});
chart.yAxis
.tickFormat(d3.format(',.2f'));
d3.select('#chart1')
.datum(histcatexplong)
.transition().duration(1000)
.call(chart)
// .transition().duration(0)
.each('start', function() {
setTimeout(function() {
d3.selectAll('#chart1 *').each(function() {
console.log('start',this.__transition__, this)
// while(this.__transition__)
if(this.__transition__)
this.__transition__.duration = 1;
})
}, 0)
})
// .each('end', function() {
// d3.selectAll('#chart1 *').each(function() {
// console.log('end', this.__transition__, this)
// // while(this.__transition__)
// if(this.__transition__)
// this.__transition__.duration = 1;
// })});
nv.utils.windowResize(chart.update);
// chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});
</script>回答 1
Stack Overflow用户
发布于 2014-02-01 03:25:03
在您对数据进行其他操作之前，我会先解析日期。这样，您就可以使用常用的格式化函数。代码应该是这样的：
var parser = d3.time.format("%Y%m%d");
histcatexplong.forEach(function(d) {
d.values.forEach(function(e) {
e[0] = parser.parse("" + e[0]);
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21487456
复制相关文章
相似问题
腾讯云开发者
