Question

我在完成xAxis时遇到了问题。我是一个使用D3的新手，我刚刚使用D3 Date方法迷路了。任何人都可以帮我弄清楚导致undefined is not a function的问题。我将非常感谢您的帮助，这是我的代码：

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="styles/main.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
    <h1>Hello worlds</h1>
    <div id="wrapper"></div>
    <script type="text/javascript" src="scripts/app.js"></script>
</body>
</html>

scripts.js中

var height = 800,
    width = 500,
    padding = 50;

var vizz = d3.select('#wrapper')
            .append('svg')
            .attr('height', height + padding * 2)
            .attr('width', width + padding * 2)
            .append('g')
            .attr('id', 'visual')
            .attr('transform', 'translate(' + padding + ',' + padding + ')');


var yScale = d3.scale.linear().range([height, 0]);
var xScale = d3.time.scale().range([0, width]);
var parseTime = d3.time.format("%Y%m%D");


var xAxis = d3.svg.axis().scale(xScale).orient("botom").tricks(8);
var yAxis = d3.svg.axis().scale(yScale).orient("left").tricks(20);



d3.csv('data/climate_data.csv', function(data){

    yDomain = d3.extent(data, function(element){
        return parseInt(element.TMAX)
    });
    xDomain = d3.extent(data, function(element){
        return parseTime.parse(element.DATE)
    });


    yScale.domain(yDomain);
    xScale.domain(xDomain);


    dots = vizz.selectAll('circle')
            .data(data)
            .enter()
            .append('circle');


    dots.attr('r', function (d){ 
        return d.TMAX / 100; })
    .attr('cx', function(d) {return Math.max(0 + padding, Math.random() * width - padding)})
    .attr('cy', function(d) {
        return yScale(d.TMAX);
    });

});

数据/ climate_data.csv

STATION,STATION_NAME,ELEVATION,LATITUDE,LONGITUDE,DATE,PRCP,TMAX,TMIN,TOBS
GHCND:USC00356749,PORTLAND KGW TV OR US,48.5,45.51667,-122.68333,19730801,0,294,133,217
GHCND:USC00356749,PORTLAND KGW TV OR US,48.5,45.51667,-122.68333,19730802,0,300,128,217
GHCND:USC00356749,PORTLAND KGW TV OR US,48.5,45.51667,-122.68333,19730803,0,289,133,172

Answer 1

要给刻度提供刻度数的建议，可以调用函数scale.ticks（）。另请参阅https://github.com/mbostock/d3/wiki/SVG-Axes#ticks

xAxis（日期）：未定义不是函数

1 个答案: