Question

我一直在探索限制d3.js中刻度线数量的可能性，这样如果数据集相对较大，它就不会超载文本。我确实看过http://bl.ocks.org/mbostock/3212294和ticks（）和tickValues（）周围的文档，这对我来说似乎有用，但它没有画出任何东西：

HTML：

<!DOCTYPE html>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

CSS：

<style>
body { 
    font: 10px Arial;
}
.axis path {
    fill: none;
    stroke: grey;
    shape-rendering: crispEdges;
}
.axis text {
    font-family: Arial;
    font-size: 10px;
}
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
</style>

JAVASCRIPT：

function renderAreaChart() {

        var data = [{"name":"24-Apr-07","value":93.24},{"name":"25-Apr-07","value":95.35},{"name":"26-Apr-07","value":98.84},{"name":"27-Apr-07","value":99.92},{"name":"30-Apr-07","value":99.8},{"name":"1-May-07","value":99.47},{"name":"2-May-07","value":100.39},{"name":"3-May-07","value":100.4},{"name":"4-May-07","value":100.81},{"name":"7-May-07","value":103.92},{"name":"8-May-07","value":105.06},{"name":"9-May-07","value":106.88},{"name":"10-May-07","value":107.34},{"name":"11-May-07","value":108.74},{"name":"14-May-07","value":109.36},{"name":"15-May-07","value":107.52},{"name":"16-May-07","value":107.34},{"name":"17-May-07","value":109.44},{"name":"18-May-07","value":110.02},{"name":"21-May-07","value":111.98},{"name":"22-May-07","value":113.54},{"name":"23-May-07","value":112.89},{"name":"24-May-07","value":110.69},{"name":"25-May-07","value":113.62},{"name":"29-May-07","value":114.35},{"name":"30-May-07","value":118.77},{"name":"31-May-07","value":121.19},{"name":"1-Jun-07","value":118.4},{"name":"4-Jun-07","value":121.33},{"name":"5-Jun-07","value":122.67},{"name":"6-Jun-07","value":123.64},{"name":"7-Jun-07","value":124.07},{"name":"8-Jun-07","value":124.49},{"name":"11-Jun-07","value":120.19},{"name":"12-Jun-07","value":120.38},{"name":"13-Jun-07","value":117.5},{"name":"14-Jun-07","value":118.75},{"name":"15-Jun-07","value":120.5},{"name":"18-Jun-07","value":125.09},{"name":"19-Jun-07","value":123.66},{"name":"20-Jun-07","value":121.55},{"name":"21-Jun-07","value":123.9},{"name":"22-Jun-07","value":123},{"name":"25-Jun-07","value":122.34},{"name":"26-Jun-07","value":119.65},{"name":"27-Jun-07","value":121.89},{"name":"28-Jun-07","value":120.56},{"name":"29-Jun-07","value":122.04},{"name":"2-Jul-07","value":121.26},{"name":"3-Jul-07","value":127.17},{"name":"5-Jul-07","value":132.75},{"name":"6-Jul-07","value":132.3},{"name":"9-Jul-07","value":130.33},{"name":"10-Jul-07","value":132.35},{"name":"11-Jul-07","value":132.39},{"name":"12-Jul-07","value":134.07},{"name":"13-Jul-07","value":137.73},{"name":"16-Jul-07","value":138.1},{"name":"17-Jul-07","value":138.91},{"name":"18-Jul-07","value":138.12},{"name":"19-Jul-07","value":140},{"name":"20-Jul-07","value":143.75},{"name":"23-Jul-07","value":143.7},{"name":"24-Jul-07","value":134.89}];

        var margin = { top: 20, right: 20, bottom: 30, left: 50 },
            width = 800 - margin.left - margin.right,
            height = 600 - margin.top - margin.bottom;

        var x = d3.scale.ordinal()
            .domain(data.map(function (d) { return d.name; }))
            .rangePoints([0, width], 1);

        var y = d3.scale.linear()
            .range([height, 0]);

        var newArray = [];
        var stepSize = Math.floor(data.length / 4);

        for (var index in data){
          if (index % 3 === stepSize){
            newArray.push(data[index]["name"])
            }
        };

        var xAxis = d3.svg.axis()
            .scale(x)
            .tickValues(newArray)
            .orient("bottom");

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

        var line = d3.svg.line()
            .x(function (d) { return x(d.name); })
            .y(function (d) { return y(d.value); });

        var area = d3.svg.area()
            .x(function (d) { return x(d.name); })
            .y0(height)
            .y1(function (d) { return y(d.value); });

        var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        data.forEach(function (d) {
            d.name = d.name;
            d.value = +d.value;
        });


            y.domain([0, 650]);

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Label");

        svg.append("path")
            .datum(data)
            .attr("d", area)
            .attr("fill", "#FF0000");
    }

    renderAreaChart();

RENDER：

正如你可以看到的那样（并且我确信它是我对javascript和d3的错误理解，因为我是一个菜鸟），它没有绘制任何刻度线。如果有人能够帮助我，我将不胜感激。

Answer 1

看起来你的逻辑还可以，但有些细节可能会错误地指导你。你在填充后输出newArray进行了调试吗？

我运行你的代码时得到一个空数组，因为你的检查：

index % 3 === stepSize;

不使用此数据集。

等式的LHS（左侧）将为0,1,2，具体取决于indx的值。对于您在此处的特定数据集，RHS（右侧）为16。 0,1,2永远不会等于16，所以你最终得到一个空的newArray，因此没有tickValues。

您可以尝试，例如：

newArray = data
             .filter(function(d, i) { return !(i % 4); })
             .map(function(d) { return d.name; })

给你每隔四个滴答。

Answer 2

我也找到了这个例子：

var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .tickValues(data.map( function(d,i) 
                        {
                if(i % 9 ===0 ) {
              return d.name;
              }
            })
            .filter(function (d) 
            { 
                return !!d; 
            } 
            ));

似乎正是我需要过滤掉每个第n个刻度值而不生成额外的数组。

使用序数标度限制d3.js x轴中的刻度数

2 个答案: