Question

我对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>

Answer 1

在您对数据执行任何其他操作之前，我会解析日期。这样，您可以使用通常的格式化功能。代码将是这样的：

var parser = d3.time.format("%Y%m%d");
histcatexplong.forEach(function(d) {
  d.values.forEach(function(e) {
    e[0] = parser.parse("" + e[0]);
  });
});

chart.xAxis .tickFormat格式不起作用

1 个答案: