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

要在轴上强制刻度值，您可以使用ticks()或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]),

D3js改变刻度x和y轴

1 个答案: