如何删除双网格线并强制y到原点

时间:2013-10-26 16:29:22

标签: javascript php d3.js bar-chart nvd3.js

首先,如图所示,Y轴网格线是双倍的。有没有办法从y1或y2轴上移除它们?

第二个问题如何强制Y轴从0开始?我试过这个:

chart.bars1.forceY([0]);
chart.lines1.forceY([0]);

但这没有用,有关这些问题的想法吗?

Javascript代码

var data = graphData();

nv.addGraph(function() {    
    var chart = nv.models.multiChart()
        .margin({top: 30, right: 60, bottom: 50, left: 70})
        .color(d3.scale.category10().range());

    chart.xAxis.tickFormat(function(d) {
      var dx = data[0].values[d] && data[0].values[d].x || 0;
      return d3.time.format('%x')(new Date(d))
    });


    chart.yAxis1
        .tickFormat(d3.format(',.f'));

    chart.yAxis2
        .tickFormat(d3.format(',.f'));

    d3.select('#chart svg')
        .datum(data)
      .transition().duration(500).call(chart);

    return chart;
});

function graphData() {
    return <? echo json_encode($graph, JSON_NUMERIC_CHECK) ?>
        .map(function(series) {
            series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
        return series;
    }); 
}

结果 Double gridlines

数据

[{
        "key" : "Tweets",
        "type" : "bar",
        "yAxis" : 1,
        "values" : [[1380499200000, 41], [1380585600000, 220], [1380672000000, 270], [1380758400000, 195], [1380844800000, 160], [1380931200000, 202], [1381017600000, 194], [1381104000000, 177], [1381190400000, 155], [1381276800000, 219], [1381363200000, 203], [1381449600000, 193], [1381536000000, 252], [1381622400000, 134], [1381708800000, 238], [1381795200000, 233], [1381881600000, 271], [1381968000000, 336], [1382054400000, 257], [1382140800000, 241], [1382227200000, 126], [1382313600000, 159], [1382400000000, 180], [1382486400000, 293], [1382572800000, 212], [1382659200000, 187], [1382745600000, 181]]
    }, {
        "key" : "Retweets",
        "type" : "bar",
        "yAxis" : 1,
        "values" : [[1380499200000, 16], [1380585600000, 70], [1380672000000, 101], [1380758400000, 66], [1380844800000, 61], [1380931200000, 92], [1381017600000, 73], [1381104000000, 70], [1381190400000, 50], [1381276800000, 84], [1381363200000, 76], [1381449600000, 89], [1381536000000, 118], [1381622400000, 55], [1381708800000, 81], [1381795200000, 76], [1381881600000, 82], [1381968000000, 132], [1382054400000, 85], [1382140800000, 104], [1382227200000, 48], [1382313600000, 55], [1382400000000, 59], [1382486400000, 106], [1382572800000, 73], [1382659200000, 78], [1382745600000, 78]]
    }, {
        "key" : "Replies",
        "type" : "bar",
        "yAxis" : 1,
        "values" : [[1380499200000, 7], [1380585600000, 33], [1380672000000, 47], [1380758400000, 29], [1380844800000, 19], [1380931200000, 29], [1381017600000, 30], [1381104000000, 25], [1381190400000, 25], [1381276800000, 33], [1381363200000, 26], [1381449600000, 22], [1381536000000, 33], [1381622400000, 15], [1381708800000, 26], [1381795200000, 19], [1381881600000, 33], [1381968000000, 46], [1382054400000, 37], [1382140800000, 36], [1382227200000, 21], [1382313600000, 32], [1382400000000, 27], [1382486400000, 43], [1382572800000, 19], [1382659200000, 19], [1382745600000, 17]]
    }, {
        "key" : "Cumulatief",
        "type" : "line",
        "yAxis" : 2,
        "values" : [[1380499200000, 41], [1380585600000, 261], [1380672000000, 531], [1380758400000, 726], [1380844800000, 886], [1380931200000, 1088], [1381017600000, 1282], [1381104000000, 1459], [1381190400000, 1614], [1381276800000, 1833], [1381363200000, 2036], [1381449600000, 2229], [1381536000000, 2481], [1381622400000, 2615], [1381708800000, 2853], [1381795200000, 3086], [1381881600000, 3357], [1381968000000, 3693], [1382054400000, 3950], [1382140800000, 4191], [1382227200000, 4317], [1382313600000, 4476], [1382400000000, 4656], [1382486400000, 4949], [1382572800000, 5161], [1382659200000, 5348], [1382745600000, 5529]]
    }
]       

1 个答案:

答案 0 :(得分:0)

该拉取请求可以解决您的问题,以及其他问题,例如在多图上隐藏线图。

https://github.com/novus/nvd3/pull/379