D3js更改刻度x和y轴

Question

我是D3JS的新手，并且已经阅读了CodeTuts上制作线形图的教程 。

我要制作的图表应显示每小时的用户数量和设备类别。 由于我希望能够看到人们何时将切换到平板电脑或移动设备，而不是台式机，所以我做了三个阵列。

数组是这样构建的：

var desktop = [
{
  'hour': 01,
  'users': 20
},
{
 'hour': 08,
 'users': 800
}
];

我的图现在看起来像这样： 我想了解如何将xaxis值设置为：

00 , 01, 02, 03, 04 ,05, etc..

并且yaxis应该专注于最低的设备类别（移动设备和台式机），因此yaxis应该类似于：

00, 10, 20, 30, 40, 50, 60, 70, 80, 100, [maxvalue of users in desktop array]

所以应该是这样的：

我的代码：

function makeChart(desktopData,mobileData,tabletData){
    var WIDTH = 1200,
        HEIGHT = 300,
        MARGINS = {
                top:20,
            right:20,
            bottom:20,
            left:50
        }
    var vis = d3.select("#visualisation"),
        WIDTH = 1200,
        HEIGHT = 300,
        MARGINS = {
            top: 20,
            right: 20,
            bottom: 20,
            left: 50
        },
        xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([00,23]),
        yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([00,100]),
        xAxis = d3.svg.axis()
            .scale(xScale),

        yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left");

    vis.append("svg:g")
        .attr("class","axis")
        .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
        .call(xAxis);

    vis.append("svg:g")
        .attr("class","axis")
        .attr("transform", "translate(" + (MARGINS.left) + ",0)")
        .call(yAxis);

    var lineGen = d3.svg.line()
        .x(function(d){
            return xScale(d.uur);
        })
        .y(function(d){
            return yScale(d.pageviews);
        });
    vis.append('svg:path')
        .attr('d', lineGen(desktopData))
        .attr('stroke','deepskyblue')
        .attr('stroke-width',2)
        .attr('fill','none');

    vis.append('svg:path')
        .attr('d', lineGen(mobileData))
        .attr('stroke','orange')
        .attr('stroke-width',2)
        .attr('fill','none');

    vis.append('svg:path')
        .attr('d', lineGen(tabletData))
        .attr('stroke','deeppink')
        .attr('stroke-width',2)
        .attr('fill','none');
}

Answer 1

要强制上线刻度值，你可以使用蜱（）或tickValues（） （甚至tickFormat（） ，如果你需要有显示的特定格式）。

例如：

var xAxis = d3.svg.axis()
    .scale(xScale)
    .ticks(24); // Will display 24 ticks (for 24 hours on x axis)

对于y axis ，必须定义从0到最大值的比例域。 代替

yScale = d3.scale.linear()
    .range([HEIGHT - MARGINS.top, MARGINS.bottom])
    .domain([00,100]), // All values above 100 will be out of the chart

如下定义域（此处使用d3.max（） ）：

var maxValue = d3.max(desktopArray, function(d){ return d.users });

var yScale = d3.scale.linear()
    .range([HEIGHT - MARGINS.top, MARGINS.bottom])
    .domain([00, maxValue]),