javascript - d3.js x 轴具体字符串刻度数

标签 javascript d3.js

我正在尝试生成一个面积图,其 x 轴设置为固定数量的刻度 (10),其中每个刻度都是用于图表的数据集中的字符串值。我不知道我在这里做错了什么:

<!DOCTYPE html>
<meta charset="utf - 8">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.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>
</head>
<div class="row">
<div class="col-md-12" id="areaareaChart1" align="center">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
    function renderAreaChart() {

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

        var x = d3.scale.ordinal()
            .rangePoints([0, width], 1);

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

        var xAxis = d3.svg.axis()
            .scale(x)
    .ticks(10)
            .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("#areaareaChart1").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 + ")");

        var data = [{"name":"23-May-08","value":181.17},{"name":"27-May-08","value":186.43},{"name":"28-May-08","value":187.01},{"name":"29-May-08","value":186.69},{"name":"30-May-08","value":188.75},{"name":"2-Jun-08","value":186.1},{"name":"3-Jun-08","value":185.37},{"name":"4-Jun-08","value":185.19},{"name":"5-Jun-08","value":189.43},{"name":"6-Jun-08","value":185.64},{"name":"9-Jun-08","value":181.61},{"name":"10-Jun-08","value":185.64},{"name":"11-Jun-08","value":180.81},{"name":"12-Jun-08","value":173.26},{"name":"13-Jun-08","value":172.37},{"name":"16-Jun-08","value":176.84},{"name":"17-Jun-08","value":181.43},{"name":"18-Jun-08","value":178.75},{"name":"19-Jun-08","value":180.9},{"name":"20-Jun-08","value":175.27},{"name":"23-Jun-08","value":173.16},{"name":"24-Jun-08","value":173.25},{"name":"25-Jun-08","value":177.39},{"name":"26-Jun-08","value":168.26},{"name":"27-Jun-08","value":170.09},{"name":"30-Jun-08","value":167.44},{"name":"1-Jul-08","value":174.68},{"name":"2-Jul-08","value":168.18},{"name":"3-Jul-08","value":170.12},{"name":"7-Jul-08","value":175.16},{"name":"8-Jul-08","value":179.55},{"name":"9-Jul-08","value":174.25},{"name":"10-Jul-08","value":176.63},{"name":"11-Jul-08","value":172.58},{"name":"14-Jul-08","value":173.88},{"name":"15-Jul-08","value":169.64},{"name":"16-Jul-08","value":172.81},{"name":"17-Jul-08","value":171.81},{"name":"18-Jul-08","value":165.15},{"name":"21-Jul-08","value":166.29},{"name":"22-Jul-08","value":162.02},{"name":"23-Jul-08","value":166.26},{"name":"24-Jul-08","value":159.03},{"name":"25-Jul-08","value":162.12},{"name":"28-Jul-08","value":154.4},{"name":"29-Jul-08","value":157.08},{"name":"30-Jul-08","value":159.88},{"name":"31-Jul-08","value":158.95},{"name":"1-Aug-08","value":156.66},{"name":"4-Aug-08","value":153.23},{"name":"5-Aug-08","value":160.64},{"name":"6-Aug-08","value":164.19},{"name":"7-Aug-08","value":163.57},{"name":"8-Aug-08","value":169.55},{"name":"11-Aug-08","value":173.56},{"name":"12-Aug-08","value":176.73},{"name":"13-Aug-08","value":179.3},{"name":"14-Aug-08","value":179.32},{"name":"15-Aug-08","value":175.74},{"name":"18-Aug-08","value":175.39},{"name":"19-Aug-08","value":173.53},{"name":"20-Aug-08","value":175.84},{"name":"21-Aug-08","value":174.29},{"name":"22-Aug-08","value":176.79},{"name":"25-Aug-08","value":172.55},{"name":"26-Aug-08","value":173.64},{"name":"27-Aug-08","value":174.67},{"name":"28-Aug-08","value":173.74},{"name":"29-Aug-08","value":169.53},{"name":"2-Sep-08","value":166.19},{"name":"3-Sep-08","value":166.96},{"name":"4-Sep-08","value":161.22},{"name":"5-Sep-08","value":160.18},{"name":"8-Sep-08","value":157.92},{"name":"9-Sep-08","value":151.68},{"name":"10-Sep-08","value":151.61},{"name":"11-Sep-08","value":152.65},{"name":"12-Sep-08","value":148.94},{"name":"15-Sep-08","value":140.36},{"name":"16-Sep-08","value":139.88},{"name":"17-Sep-08","value":127.83},{"name":"18-Sep-08","value":134.09},{"name":"19-Sep-08","value":140.91},{"name":"22-Sep-08","value":131.05},{"name":"23-Sep-08","value":126.84},{"name":"24-Sep-08","value":128.71},{"name":"25-Sep-08","value":131.93},{"name":"26-Sep-08","value":128.24},{"name":"29-Sep-08","value":105.26},{"name":"30-Sep-08","value":113.66},{"name":"1-Oct-08","value":109.12},{"name":"2-Oct-08","value":100.1},{"name":"3-Oct-08","value":97.07},{"name":"6-Oct-08","value":98.14},{"name":"7-Oct-08","value":89.16},{"name":"8-Oct-08","value":89.79},{"name":"9-Oct-08","value":88.74},{"name":"10-Oct-08","value":96.8},{"name":"13-Oct-08","value":110.26},{"name":"14-Oct-08","value":104.08},{"name":"15-Oct-08","value":97.95},{"name":"16-Oct-08","value":101.89},{"name":"17-Oct-08","value":97.4},{"name":"20-Oct-08","value":98.44},{"name":"21-Oct-08","value":91.49},{"name":"22-Oct-08","value":96.87},{"name":"23-Oct-08","value":98.23},{"name":"24-Oct-08","value":96.38},{"name":"27-Oct-08","value":92.09},{"name":"28-Oct-08","value":99.91},{"name":"29-Oct-08","value":104.55},{"name":"30-Oct-08","value":111.04},{"name":"31-Oct-08","value":107.59},{"name":"3-Nov-08","value":106.96},{"name":"4-Nov-08","value":110.99},{"name":"5-Nov-08","value":103.3},{"name":"6-Nov-08","value":99.1},{"name":"7-Nov-08","value":98.24},{"name":"10-Nov-08","value":95.88},{"name":"11-Nov-08","value":94.77},{"name":"12-Nov-08","value":90.12},{"name":"13-Nov-08","value":96.44},{"name":"14-Nov-08","value":90.24},{"name":"17-Nov-08","value":88.14},{"name":"18-Nov-08","value":89.91},{"name":"19-Nov-08","value":86.29},{"name":"20-Nov-08","value":80.49},{"name":"21-Nov-08","value":82.58},{"name":"24-Nov-08","value":92.95},{"name":"25-Nov-08","value":90.8},{"name":"26-Nov-08","value":95},{"name":"27-Nov-08","value":95},{"name":"28-Nov-08","value":92.67},{"name":"1-Dec-08","value":88.93},{"name":"2-Dec-08","value":92.47},{"name":"3-Dec-08","value":95.9},{"name":"4-Dec-08","value":91.41},{"name":"5-Dec-08","value":94},{"name":"8-Dec-08","value":99.72},{"name":"9-Dec-08","value":100.06},{"name":"10-Dec-08","value":98.21},{"name":"11-Dec-08","value":95},{"name":"12-Dec-08","value":98.27},{"name":"15-Dec-08","value":94.75},{"name":"16-Dec-08","value":95.43},{"name":"17-Dec-08","value":89.16},{"name":"18-Dec-08","value":89.43},{"name":"19-Dec-08","value":90},{"name":"22-Dec-08","value":85.74},{"name":"23-Dec-08","value":86.38},{"name":"24-Dec-08","value":85.04},{"name":"25-Dec-08","value":85.04},{"name":"26-Dec-08","value":85.81},{"name":"29-Dec-08","value":86.61},{"name":"30-Dec-08","value":86.29},{"name":"31-Dec-08","value":85.35},{"name":"1-Jan-09","value":85.35},{"name":"2-Jan-09","value":90.75},{"name":"5-Jan-09","value":94.58},{"name":"6-Jan-09","value":93.02},{"name":"7-Jan-09","value":91.01},{"name":"8-Jan-09","value":92.7},{"name":"9-Jan-09","value":90.58},{"name":"12-Jan-09","value":88.66},{"name":"13-Jan-09","value":87.71},{"name":"14-Jan-09","value":85.33},{"name":"15-Jan-09","value":83.38},{"name":"16-Jan-09","value":82.33},{"name":"20-Jan-09","value":78.2},{"name":"21-Jan-09","value":82.83},{"name":"22-Jan-09","value":88.36},{"name":"23-Jan-09","value":88.36},{"name":"26-Jan-09","value":89.64},{"name":"27-Jan-09","value":90.73},{"name":"28-Jan-09","value":94.2},{"name":"29-Jan-09","value":93},{"name":"30-Jan-09","value":90.13},{"name":"2-Feb-09","value":91.51},{"name":"3-Feb-09","value":92.98},{"name":"4-Feb-09","value":93.55},{"name":"5-Feb-09","value":96.46},{"name":"6-Feb-09","value":99.72},{"name":"9-Feb-09","value":102.51},{"name":"10-Feb-09","value":97.83},{"name":"11-Feb-09","value":96.82},{"name":"12-Feb-09","value":99.27},{"name":"13-Feb-09","value":99.16},{"name":"17-Feb-09","value":94.53},{"name":"18-Feb-09","value":94.37},{"name":"19-Feb-09","value":90.64},{"name":"20-Feb-09","value":91.2},{"name":"23-Feb-09","value":86.95},{"name":"24-Feb-09","value":90.25},{"name":"25-Feb-09","value":91.16},{"name":"26-Feb-09","value":89.19},{"name":"27-Feb-09","value":89.31},{"name":"2-Mar-09","value":87.94},{"name":"3-Mar-09","value":88.37},{"name":"4-Mar-09","value":91.17},{"name":"5-Mar-09","value":88.84},{"name":"6-Mar-09","value":85.3},{"name":"9-Mar-09","value":83.11},{"name":"10-Mar-09","value":88.63},{"name":"11-Mar-09","value":92.68},{"name":"12-Mar-09","value":96.35},{"name":"13-Mar-09","value":95.93},{"name":"16-Mar-09","value":95.42},{"name":"17-Mar-09","value":99.66},{"name":"18-Mar-09","value":101.52},{"name":"19-Mar-09","value":101.62},{"name":"20-Mar-09","value":101.59},{"name":"23-Mar-09","value":107.66},{"name":"24-Mar-09","value":106.5},{"name":"25-Mar-09","value":106.49},{"name":"26-Mar-09","value":109.87},{"name":"27-Mar-09","value":106.85},{"name":"30-Mar-09","value":104.49},{"name":"31-Mar-09","value":105.12},{"name":"1-Apr-09","value":108.69},{"name":"2-Apr-09","value":112.71},{"name":"3-Apr-09","value":115.99},{"name":"6-Apr-09","value":118.45},{"name":"7-Apr-09","value":115},{"name":"8-Apr-09","value":116.32},{"name":"9-Apr-09","value":119.57},{"name":"10-Apr-09","value":119.57},{"name":"13-Apr-09","value":120.22},{"name":"14-Apr-09","value":118.31},{"name":"15-Apr-09","value":117.64},{"name":"16-Apr-09","value":121.45},{"name":"17-Apr-09","value":123.42},{"name":"20-Apr-09","value":120.5},{"name":"21-Apr-09","value":121.76},{"name":"22-Apr-09","value":121.51},{"name":"23-Apr-09","value":125.4},{"name":"24-Apr-09","value":123.9},{"name":"27-Apr-09","value":124.73},{"name":"28-Apr-09","value":123.9},{"name":"29-Apr-09","value":125.14},{"name":"30-Apr-09","value":125.83},{"name":"1-May-09","value":127.24},{"name":"4-May-09","value":132.07},{"name":"5-May-09","value":132.71},{"name":"6-May-09","value":132.5},{"name":"7-May-09","value":129.06},{"name":"8-May-09","value":129.19},{"name":"11-May-09","value":129.57},{"name":"12-May-09","value":124.42},{"name":"13-May-09","value":119.49},{"name":"14-May-09","value":122.95},{"name":"15-May-09","value":122.42},{"name":"18-May-09","value":126.65},{"name":"19-May-09","value":127.45},{"name":"20-May-09","value":125.87},{"name":"21-May-09","value":124.18},{"name":"22-May-09","value":122.5},{"name":"26-May-09","value":130.78},{"name":"27-May-09","value":133.05},{"name":"28-May-09","value":135.07},{"name":"29-May-09","value":135.81},{"name":"1-Jun-09","value":139.35},{"name":"2-Jun-09","value":139.49},{"name":"3-Jun-09","value":140.95},{"name":"4-Jun-09","value":143.74},{"name":"5-Jun-09","value":144.67},{"name":"8-Jun-09","value":143.85},{"name":"9-Jun-09","value":142.72},{"name":"10-Jun-09","value":140.25},{"name":"11-Jun-09","value":139.95},{"name":"12-Jun-09","value":136.97},{"name":"15-Jun-09","value":136.09},{"name":"16-Jun-09","value":136.35},{"name":"17-Jun-09","value":135.58},{"name":"18-Jun-09","value":135.88},{"name":"19-Jun-09","value":139.48},{"name":"22-Jun-09","value":137.37},{"name":"23-Jun-09","value":134.01},{"name":"24-Jun-09","value":136.22},{"name":"25-Jun-09","value":139.86},{"name":"26-Jun-09","value":142.44},{"name":"29-Jun-09","value":141.97},{"name":"30-Jun-09","value":142.43},{"name":"1-Jul-09","value":142.83},{"name":"2-Jul-09","value":140.02},{"name":"3-Jul-09","value":140.02},{"name":"6-Jul-09","value":138.61},{"name":"7-Jul-09","value":135.4},{"name":"8-Jul-09","value":137.22},{"name":"9-Jul-09","value":136.36},{"name":"10-Jul-09","value":138.52},{"name":"13-Jul-09","value":142.34},{"name":"14-Jul-09","value":142.27},{"name":"15-Jul-09","value":146.88},{"name":"16-Jul-09","value":147.52},{"name":"17-Jul-09","value":151.75},{"name":"20-Jul-09","value":152.91},{"name":"21-Jul-09","value":151.51},{"name":"22-Jul-09","value":156.74},{"name":"23-Jul-09","value":157.82},{"name":"24-Jul-09","value":159.99},{"name":"27-Jul-09","value":160.1},{"name":"28-Jul-09","value":160},{"name":"29-Jul-09","value":160.03},{"name":"30-Jul-09","value":162.79},{"name":"31-Jul-09","value":163.39},{"name":"3-Aug-09","value":166.43},{"name":"4-Aug-09","value":165.55},{"name":"5-Aug-09","value":165.11},{"name":"6-Aug-09","value":163.91},{"name":"7-Aug-09","value":165.51},{"name":"10-Aug-09","value":164.72},{"name":"12-Aug-09","value":165.31},{"name":"13-Aug-09","value":168.42},{"name":"14-Aug-09","value":166.78},{"name":"17-Aug-09","value":159.59},{"name":"18-Aug-09","value":164},{"name":"19-Aug-09","value":164.6},{"name":"20-Aug-09","value":166.33},{"name":"21-Aug-09","value":169.22},{"name":"24-Aug-09","value":169.06},{"name":"25-Aug-09","value":169.4},{"name":"26-Aug-09","value":167.41},{"name":"27-Aug-09","value":169.45},{"name":"28-Aug-09","value":170.05},{"name":"31-Aug-09","value":168.21},{"name":"1-Sep-09","value":165.3},{"name":"2-Sep-09","value":165.18},{"name":"3-Sep-09","value":166.55},{"name":"4-Sep-09","value":170.31},{"name":"8-Sep-09","value":172.93},{"name":"9-Sep-09","value":171.14},{"name":"10-Sep-09","value":172.56},{"name":"11-Sep-09","value":172.16},{"name":"14-Sep-09","value":173.72},{"name":"15-Sep-09","value":175.16},{"name":"16-Sep-09","value":181.87},{"name":"17-Sep-09","value":184.55},{"name":"18-Sep-09","value":185.02},{"name":"21-Sep-09","value":184.02},{"name":"22-Sep-09","value":184.48},{"name":"23-Sep-09","value":185.5},{"name":"24-Sep-09","value":183.82},{"name":"25-Sep-09","value":182.37},{"name":"28-Sep-09","value":186.15},{"name":"29-Sep-09","value":185.38},{"name":"30-Sep-09","value":185.35},{"name":"1-Oct-09","value":180.86},{"name":"2-Oct-09","value":184.9},{"name":"5-Oct-09","value":186.02},{"name":"6-Oct-09","value":190.01},{"name":"7-Oct-09","value":190.25},{"name":"8-Oct-09","value":189.27},{"name":"9-Oct-09","value":190.47},{"name":"12-Oct-09","value":190.81},{"name":"13-Oct-09","value":190.02},{"name":"14-Oct-09","value":191.29},{"name":"15-Oct-09","value":190.56},{"name":"16-Oct-09","value":188.05},{"name":"19-Oct-09","value":189.86},{"name":"20-Oct-09","value":198.76},{"name":"21-Oct-09","value":204.92},{"name":"22-Oct-09","value":205.2},{"name":"23-Oct-09","value":203.94},{"name":"26-Oct-09","value":202.48},{"name":"27-Oct-09","value":197.37},{"name":"28-Oct-09","value":192.4},{"name":"29-Oct-09","value":196.35},{"name":"30-Oct-09","value":188.5},{"name":"2-Nov-09","value":189.31},{"name":"3-Nov-09","value":188.75},{"name":"4-Nov-09","value":190.81},{"name":"5-Nov-09","value":194.03},{"name":"6-Nov-09","value":194.34},{"name":"9-Nov-09","value":201.46},{"name":"10-Nov-09","value":202.98},{"name":"11-Nov-09","value":203.25},{"name":"12-Nov-09","value":201.99},{"name":"13-Nov-09","value":204.45},{"name":"16-Nov-09","value":206.63},{"name":"17-Nov-09","value":207},{"name":"18-Nov-09","value":205.96},{"name":"19-Nov-09","value":200.51},{"name":"20-Nov-09","value":199.92},{"name":"23-Nov-09","value":205.88},{"name":"24-Nov-09","value":204.44},{"name":"25-Nov-09","value":204.19},{"name":"26-Nov-09","value":204.19},{"name":"27-Nov-09","value":200.59},{"name":"30-Nov-09","value":199.91},{"name":"1-Dec-09","value":196.97},{"name":"2-Dec-09","value":196.23},{"name":"3-Dec-09","value":196.48},{"name":"4-Dec-09","value":193.32},{"name":"7-Dec-09","value":188.95},{"name":"8-Dec-09","value":189.87},{"name":"9-Dec-09","value":197.8},{"name":"10-Dec-09","value":196.43},{"name":"11-Dec-09","value":194.67},{"name":"14-Dec-09","value":196.98},{"name":"15-Dec-09","value":194.17},{"name":"16-Dec-09","value":195.03},{"name":"17-Dec-09","value":191.86},{"name":"18-Dec-09","value":195.43},{"name":"21-Dec-09","value":198.23},{"name":"22-Dec-09","value":200.36},{"name":"23-Dec-09","value":202.1},{"name":"24-Dec-09","value":209.04},{"name":"25-Dec-09","value":209.04},{"name":"28-Dec-09","value":211.61},{"name":"29-Dec-09","value":209.1},{"name":"30-Dec-09","value":211.64},{"name":"31-Dec-09","value":210.73},{"name":"1-Jan-10","value":210.73},{"name":"4-Jan-10","value":214.01},{"name":"5-Jan-10","value":214.38},{"name":"6-Jan-10","value":210.97},{"name":"7-Jan-10","value":210.58},{"name":"8-Jan-10","value":211.98},{"name":"11-Jan-10","value":210.11},{"name":"12-Jan-10","value":207.72},{"name":"13-Jan-10","value":210.65},{"name":"14-Jan-10","value":209.43},{"name":"15-Jan-10","value":205.93},{"name":"18-Jan-10","value":205.93},{"name":"19-Jan-10","value":215.04},{"name":"20-Jan-10","value":211.72},{"name":"21-Jan-10","value":208.07},{"name":"22-Jan-10","value":197.75},{"name":"25-Jan-10","value":203.08},{"name":"26-Jan-10","value":205.94},{"name":"27-Jan-10","value":207.88},{"name":"28-Jan-10","value":199.29},{"name":"29-Jan-10","value":192.06},{"name":"1-Feb-10","value":194.73},{"name":"2-Feb-10","value":195.86},{"name":"3-Feb-10","value":199.23},{"name":"4-Feb-10","value":192.05},{"name":"5-Feb-10","value":195.46},{"name":"8-Feb-10","value":194.12},{"name":"9-Feb-10","value":196.19},{"name":"10-Feb-10","value":195.12},{"name":"11-Feb-10","value":198.67},{"name":"12-Feb-10","value":200.38},{"name":"15-Feb-10","value":200.38},{"name":"16-Feb-10","value":203.4},{"name":"17-Feb-10","value":202.55},{"name":"18-Feb-10","value":202.93},{"name":"19-Feb-10","value":201.67},{"name":"22-Feb-10","value":200.42},{"name":"23-Feb-10","value":197.06},{"name":"24-Feb-10","value":200.66},{"name":"25-Feb-10","value":202},{"name":"26-Feb-10","value":204.62},{"name":"1-Mar-10","value":208.99},{"name":"2-Mar-10","value":208.85},{"name":"3-Mar-10","value":209.33},{"name":"4-Mar-10","value":210.71},{"name":"5-Mar-10","value":218.95},{"name":"8-Mar-10","value":219.08},{"name":"9-Mar-10","value":223.02},{"name":"10-Mar-10","value":224.84},{"name":"11-Mar-10","value":225.5},{"name":"12-Mar-10","value":226.6},{"name":"15-Mar-10","value":223.84},{"name":"16-Mar-10","value":224.45},{"name":"17-Mar-10","value":224.12},{"name":"18-Mar-10","value":224.65},{"name":"19-Mar-10","value":222.25},{"name":"22-Mar-10","value":224.75},{"name":"23-Mar-10","value":228.36},{"name":"24-Mar-10","value":229.37},{"name":"25-Mar-10","value":226.65},{"name":"26-Mar-10","value":230.9},{"name":"29-Mar-10","value":232.39},{"name":"30-Mar-10","value":235.84},{"name":"31-Mar-10","value":235},{"name":"1-Apr-10","value":235.97},{"name":"2-Apr-10","value":235.97},{"name":"5-Apr-10","value":238.49},{"name":"6-Apr-10","value":239.54},{"name":"7-Apr-10","value":240.6},{"name":"8-Apr-10","value":239.95},{"name":"9-Apr-10","value":241.79},{"name":"12-Apr-10","value":242.29},{"name":"13-Apr-10","value":242.43},{"name":"14-Apr-10","value":245.69},{"name":"15-Apr-10","value":248.92},{"name":"16-Apr-10","value":247.4},{"name":"19-Apr-10","value":247.07},{"name":"20-Apr-10","value":244.59},{"name":"21-Apr-10","value":259.22},{"name":"22-Apr-10","value":266.47},{"name":"23-Apr-10","value":270.83},{"name":"26-Apr-10","value":269.5},{"name":"27-Apr-10","value":262.04},{"name":"28-Apr-10","value":261.6},{"name":"29-Apr-10","value":268.64},{"name":"30-Apr-10","value":261.09},{"name":"3-May-10","value":266.35},{"name":"4-May-10","value":258.68},{"name":"5-May-10","value":255.98},{"name":"6-May-10","value":246.25},{"name":"7-May-10","value":235.86},{"name":"10-May-10","value":253.99},{"name":"11-May-10","value":256.52},{"name":"12-May-10","value":262.09},{"name":"13-May-10","value":258.36},{"name":"14-May-10","value":253.82},{"name":"17-May-10","value":254.22},{"name":"18-May-10","value":252.36},{"name":"19-May-10","value":248.34},{"name":"20-May-10","value":237.76},{"name":"21-May-10","value":242.32},{"name":"24-May-10","value":246.76},{"name":"25-May-10","value":245.22},{"name":"26-May-10","value":244.11},{"name":"27-May-10","value":253.35},{"name":"28-May-10","value":256.88},{"name":"31-May-10","value":256.88},{"name":"1-Jun-10","value":260.83},{"name":"2-Jun-10","value":263.95},{"name":"3-Jun-10","value":263.12},{"name":"4-Jun-10","value":255.96},{"name":"7-Jun-10","value":250.94},{"name":"8-Jun-10","value":249.33},{"name":"9-Jun-10","value":243.2},{"name":"10-Jun-10","value":250.51},{"name":"11-Jun-10","value":253.51},{"name":"20-Dec-10","value":322.21},{"name":"21-Dec-10","value":324.2},{"name":"22-Dec-10","value":325.16},{"name":"23-Dec-10","value":323.6},{"name":"27-Dec-10","value":324.68},{"name":"28-Dec-10","value":325.47},{"name":"29-Dec-10","value":325.29},{"name":"30-Dec-10","value":323.66},{"name":"31-Dec-10","value":322.56},{"name":"3-Jan-11","value":329.57},{"name":"4-Jan-11","value":331.29},{"name":"5-Jan-11","value":334},{"name":"6-Jan-11","value":333.73},{"name":"7-Jan-11","value":336.12},{"name":"10-Jan-11","value":342.46},{"name":"11-Jan-11","value":341.64},{"name":"12-Jan-11","value":344.42},{"name":"13-Jan-11","value":345.68},{"name":"14-Jan-11","value":348.48},{"name":"18-Jan-11","value":340.65},{"name":"19-Jan-11","value":338.84},{"name":"20-Jan-11","value":332.68},{"name":"21-Jan-11","value":326.72},{"name":"24-Jan-11","value":337.45},{"name":"25-Jan-11","value":341.4},{"name":"26-Jan-11","value":343.85},{"name":"27-Jan-11","value":343.21},{"name":"28-Jan-11","value":336.1},{"name":"31-Jan-11","value":339.32},{"name":"1-Feb-11","value":345.03},{"name":"2-Feb-11","value":344.32},{"name":"3-Feb-11","value":343.44},{"name":"4-Feb-11","value":346.5},{"name":"7-Feb-11","value":351.88},{"name":"8-Feb-11","value":355.2},{"name":"9-Feb-11","value":358.16},{"name":"10-Feb-11","value":354.54},{"name":"11-Feb-11","value":356.85},{"name":"14-Feb-11","value":359.18},{"name":"15-Feb-11","value":359.9},{"name":"16-Feb-11","value":363.13},{"name":"17-Feb-11","value":358.3},{"name":"18-Feb-11","value":350.56},{"name":"22-Feb-11","value":338.61},{"name":"23-Feb-11","value":342.62},{"name":"24-Feb-11","value":342.88},{"name":"25-Feb-11","value":348.16},{"name":"28-Feb-11","value":353.21},{"name":"1-Mar-11","value":349.31},{"name":"2-Mar-11","value":352.12},{"name":"3-Mar-11","value":359.56},{"name":"4-Mar-11","value":360},{"name":"7-Mar-11","value":355.36},{"name":"8-Mar-11","value":355.76},{"name":"9-Mar-11","value":352.47},{"name":"10-Mar-11","value":346.67},{"name":"11-Mar-11","value":351.99},{"name":"14-Mar-11","value":353.56},{"name":"15-Mar-11","value":345.43},{"name":"16-Mar-11","value":330.01},{"name":"17-Mar-11","value":334.64},{"name":"18-Mar-11","value":330.67},{"name":"21-Mar-11","value":339.3},{"name":"22-Mar-11","value":341.2},{"name":"23-Mar-11","value":339.19},{"name":"24-Mar-11","value":344.97},{"name":"25-Mar-11","value":351.54},{"name":"28-Mar-11","value":350.44},{"name":"29-Mar-11","value":350.96},{"name":"30-Mar-11","value":348.63},{"name":"31-Mar-11","value":348.51},{"name":"1-Apr-11","value":344.56},{"name":"4-Apr-11","value":341.19},{"name":"5-Apr-11","value":338.89},{"name":"6-Apr-11","value":338.04},{"name":"7-Apr-11","value":338.08},{"name":"8-Apr-11","value":335.06},{"name":"11-Apr-11","value":330.8},{"name":"12-Apr-11","value":332.4},{"name":"13-Apr-11","value":336.13},{"name":"14-Apr-11","value":332.42},{"name":"15-Apr-11","value":327.46},{"name":"18-Apr-11","value":331.85},{"name":"19-Apr-11","value":337.86},{"name":"20-Apr-11","value":342.41},{"name":"21-Apr-11","value":350.7},{"name":"25-Apr-11","value":353.01},{"name":"26-Apr-11","value":350.42},{"name":"27-Apr-11","value":350.15},{"name":"28-Apr-11","value":346.75},{"name":"29-Apr-11","value":350.13},{"name":"2-May-11","value":346.28},{"name":"3-May-11","value":348.2},{"name":"4-May-11","value":349.57},{"name":"5-May-11","value":346.75},{"name":"6-May-11","value":346.66},{"name":"9-May-11","value":347.6},{"name":"10-May-11","value":349.45},{"name":"11-May-11","value":347.23},{"name":"12-May-11","value":346.57},{"name":"13-May-11","value":340.5},{"name":"16-May-11","value":333.3},{"name":"17-May-11","value":336.14},{"name":"18-May-11","value":339.87},{"name":"19-May-11","value":340.53},{"name":"20-May-11","value":335.22},{"name":"23-May-11","value":334.4},{"name":"24-May-11","value":332.19},{"name":"25-May-11","value":336.78},{"name":"26-May-11","value":335},{"name":"27-May-11","value":337.41},{"name":"31-May-11","value":347.83},{"name":"1-Jun-11","value":345.51},{"name":"2-Jun-11","value":346.1},{"name":"3-Jun-11","value":343.44},{"name":"6-Jun-11","value":338.04},{"name":"7-Jun-11","value":332.04},{"name":"8-Jun-11","value":332.24},{"name":"9-Jun-11","value":331.49},{"name":"10-Jun-11","value":325.9},{"name":"13-Jun-11","value":326.6},{"name":"14-Jun-11","value":332.44},{"name":"15-Jun-11","value":326.75},{"name":"16-Jun-11","value":325.16},{"name":"17-Jun-11","value":320.26},{"name":"20-Jun-11","value":315.32},{"name":"21-Jun-11","value":325.3},{"name":"22-Jun-11","value":322.61},{"name":"23-Jun-11","value":331.23},{"name":"24-Jun-11","value":326.35},{"name":"27-Jun-11","value":332.04},{"name":"28-Jun-11","value":335.26},{"name":"29-Jun-11","value":334.04},{"name":"30-Jun-11","value":335.67},{"name":"1-Jul-11","value":343.26},{"name":"5-Jul-11","value":349.43},{"name":"6-Jul-11","value":351.76},{"name":"7-Jul-11","value":357.2},{"name":"8-Jul-11","value":359.71},{"name":"11-Jul-11","value":354},{"name":"12-Jul-11","value":353.75},{"name":"13-Jul-11","value":358.02},{"name":"14-Jul-11","value":357.77},{"name":"15-Jul-11","value":364.92},{"name":"13-Oct-11","value":408.43},{"name":"14-Oct-11","value":422},{"name":"17-Oct-11","value":419.99},{"name":"18-Oct-11","value":422.24},{"name":"19-Oct-11","value":398.62},{"name":"20-Oct-11","value":395.31},{"name":"21-Oct-11","value":392.87},{"name":"24-Oct-11","value":405.77},{"name":"25-Oct-11","value":397.77},{"name":"26-Oct-11","value":400.6},{"name":"27-Oct-11","value":404.69},{"name":"28-Oct-11","value":404.95},{"name":"31-Oct-11","value":404.78},{"name":"1-Nov-11","value":396.51},{"name":"2-Nov-11","value":397.41},{"name":"3-Nov-11","value":403.07},{"name":"4-Nov-11","value":400.24},{"name":"7-Nov-11","value":399.73},{"name":"8-Nov-11","value":406.23},{"name":"9-Nov-11","value":395.28},{"name":"10-Nov-11","value":385.22},{"name":"11-Nov-11","value":384.62},{"name":"14-Nov-11","value":379.26},{"name":"15-Nov-11","value":388.83},{"name":"16-Nov-11","value":384.77},{"name":"17-Nov-11","value":377.41},{"name":"18-Nov-11","value":374.94},{"name":"21-Nov-11","value":369.01},{"name":"22-Nov-11","value":376.51},{"name":"23-Nov-11","value":366.99},{"name":"25-Nov-11","value":363.57},{"name":"28-Nov-11","value":376.12},{"name":"29-Nov-11","value":373.2},{"name":"30-Nov-11","value":382.2},{"name":"1-Dec-11","value":387.93},{"name":"2-Dec-11","value":389.7},{"name":"5-Dec-11","value":393.01},{"name":"6-Dec-11","value":390.95},{"name":"7-Dec-11","value":389.09},{"name":"8-Dec-11","value":390.66},{"name":"9-Dec-11","value":393.62},{"name":"12-Dec-11","value":391.84},{"name":"13-Dec-11","value":388.81},{"name":"14-Dec-11","value":380.19},{"name":"15-Dec-11","value":378.94},{"name":"16-Dec-11","value":381.02},{"name":"19-Dec-11","value":382.21},{"name":"20-Dec-11","value":395.95},{"name":"21-Dec-11","value":396.44},{"name":"22-Dec-11","value":398.55},{"name":"23-Dec-11","value":403.43},{"name":"27-Dec-11","value":406.53},{"name":"28-Dec-11","value":402.64},{"name":"29-Dec-11","value":405.12},{"name":"30-Dec-11","value":405},{"name":"3-Jan-12","value":411.23},{"name":"10-Apr-12","value":628.44},{"name":"11-Apr-12","value":626.2},{"name":"12-Apr-12","value":622.77},{"name":"13-Apr-12","value":605.23},{"name":"16-Apr-12","value":580.13},{"name":"17-Apr-12","value":609.7},{"name":"18-Apr-12","value":608.34},{"name":"19-Apr-12","value":587.44},{"name":"20-Apr-12","value":572.98},{"name":"23-Apr-12","value":571.7},{"name":"24-Apr-12","value":560.28},{"name":"25-Apr-12","value":610},{"name":"26-Apr-12","value":607.7},{"name":"27-Apr-12","value":603},{"name":"30-Apr-12","value":583.98},{"name":"1-May-12","value":582.13}];

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

        x.domain(data.map(function (d) { return d.name; }));
        y.domain(d3.extent(data, function (d) { return d.value; }));

        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();
</script>
</div>
</div>

最佳答案

请看粗体部分,计数只是一个提示值。

一种无状态方法,从比例尺的输入域返回大约计数代表值。如果未指定 count,则默认为 10。返回的刻度值是均匀间隔的,具有人类可读的值(例如 10 的幂的倍数),并且保证在输入域的范围内。刻度线通常用于与可视化数据一起显示引用线或刻度线。 指定的计数只是一个提示;根据输入域,比例尺可能会返回更多或更少的值。

如果您想完全按照您想要的方式显示刻度数,可以使用 API tickValues。

https://github.com/mbostock/d3/wiki/SVG-Axes#tickValues

关于javascript - d3.js x 轴具体字符串刻度数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35932913/

相关文章:

javascript - 悬停时显示和隐藏表格行,最初隐藏,如果输入则不隐藏

javascript - libmagic。 text/plain 而不是 text/javascript text/css

javascript - 如何在 d3.js 中显示 y 轴

javascript - 如何在幻灯片而不是正文中添加 d3js 图表?

javascript - 将分配替换为延迟分配

javascript - 为什么我编译文件的时候不能编译样式文件?

javascript - 使用右侧选择器定位 div

javascript - 使用整数列表的密度图

d3.js - 将元素添加到组元素的顶部

javascript - d3.js svg 将符号保存到 Canvas 浏览器输出 <base href ="/">