Question

我是d3.js的新手。我正在尝试绘制以获取x轴上的序数值，以替换日期值。我正在使用http://bl.ocks.org/hopelessoptimism/b8ef4734abad1c644221中的示例。我在使用d3.js时遇到困难：顺序刻度。

我也尝试过此link，但其他尝试都没有成功。

数据2的csv是：

时间戳，AJU，BEL，BPS，BSB，BVB，CGB，CGH，CGR，CNF，CWB，FLN，FOR，GIG，GRU，GYN，IGU，IMP，IOS，JOI，JPA，LDB，MAB，MAO ，MCP，MCZ，NAT，NVT，PMW，POA，PVH，RAO，RBR，REC，SDU，SJP，SLZ，SSA，STM，THE，UDI，VCP，VIX A，7,5,8,4,3,8,6,7,10,4,10,2,6,8,2,3,3,4,5,10,4,4,2,9， 8,9,5,7,7,7,10,4,6,9,5,3,8,5,4,3,8,3 B，7,6,10,7,6,4,7,5,3,4,7,6,5,2,9,10,10,4,7,6,2,2,2,9， 3,4,7,9,2,4,8,10,2,3,9,2,2,2,2,10,4,9 C，6,4,7,4,5,8,8,10,9,5,2,2,8,2,2,6,8,4,10,5,2,9,3,4， 6,3,9,2,2,4,2,10,9,5,6,4,10,10,4,3,7,10 D，8,5,10,2,7,3,6,3,6,9,7,8,5,2,3,5,6,7,2,10,3,4,4,6， 9,3,4,7,2,2,2,3,7,4,8,6,7,3,8,5,9,7,8

error pic

这是行代码的一部分：

       // maximum reviews
        var max_y = d3.max(data[2], function(d) {
            var max = 0;

            d3.values(d).forEach(function(i) {
              if (+i && (+i > max)) {
                max = +i;
              }
            });

            return max;
        });

        // Create y-axis scale mapping price -> pixels
        var measure_scale = d3.scale.linear()
            .range([height, 100])
            .domain([0, max_y])
			;

        // Create D3 axis object from measure_scale for the y-axis
        var measure_axis = d3.svg.axis()
            .scale(measure_scale)
            .orient("right");

        // Append SVG to page corresponding to the D3 y-axis
        d3.select('#chart').append('g')
              .attr('class', 'y axis')
              .attr("transform", "translate(" + width + " , -15)")
              .call(measure_axis);

        // add label to y-axis	
        d3.select(".y.axis")
              .append("text")
              .attr('class', 'label')
              .text("Daily")
              .attr("transform", "translate(45,110) rotate(90)");

        // create a function to draw the timeseries for each neighborhood
        var drawChart = function(field) {
          // remove the previous chart
          d3.select('#chart').select('.x.axis').remove();
          d3.select('#chart').select('path').remove();

          // update the title
          d3.select('#heading')
            .text(field);

          // remove missing values
          var neigh_data = data[2].filter(function(d) {
            return d[field];
          });

          // get min/max dates
          var time_extent = d3.extent(neigh_data, function(d){
            return d['timestamp'];
			 ;
          });
		  
          // Create x-axis scale mapping dates -> pixels
          var time_scale = d3.scale.ordinal()
              .range([0, width - margin])
		   // .rangePoints([0, width - margin])
           // .range([0, width - margin])
		   // .rangeBands([0, width], .1)
			  .domain(time_extent)
			  ;

			  
          // Create D3 axis object from time_scale for the x-axis
          var time_axis = d3.svg.axis()
              .scale(time_scale)
		   // .ticks(10)
           // .tickFormat(d3.format(""))
		   // .tickFormat(d3.time.format("%b '%y"))
		   ;			  
			  
          // Append SVG to page corresponding to the D3 x-axis
          d3.select('#chart').append('g')
              .attr('class', 'x axis')
              .attr('transform', "translate(" + margin + ',' + (height - 15) + ")")
              .call(time_axis)
          .selectAll("text")
            .attr("y", 0)
            .attr("x", 9)
            .attr("dy", ".35em")
            .attr("transform", "rotate(90)")
            .style("text-anchor", "start");

          // define the values to map for x and y position of the line
          var line = d3.svg.line()
                       .x(function(d) { return time_scale(d['timestamp']); })
                       .y(function(d) { return measure_scale(+d[field]); });
					   
					 
					   
					   ;

          // append a SVG path that corresponds to the line chart
          d3.select('#chart').append("path")
            .datum(neigh_data)
            .attr("class", "line")
            .attr("d", line)
            .attr('transform', 'translate(' + margin + ', -15)');
        };

        drawChart(field);

        // create a callback for the neighborhood hover
        var mover = function(d) {
          var neigh = d.iata;
          d3.select('#map path.' + neigh).style('fill', '#9999ff');

          drawChart(neigh);
        };

有人可以告诉我我在做什么错吗？

D3.js序数标度仅返回极限值

0 个答案: