Question

我正在尝试在x轴上显示日期，同时在滚动时缩放它。

所以，我有这段代码：

<script type="text/javascript">

    var data =  [
    [{'x':20111001,'y':1},{'x':20111002,'y':6},{'x':20111003,'y':11},{'x':20111004,'y':1},{'x':20111005,'y':2},{'x':20111006,'y':12},{'x':20111007,'y':2},{'x':20111008,'y':3},{'x':20111009,'y':13},{'x':20111010,'y':3}],
    [{'x':20111001,'y':2},{'x':20111002,'y':2},{'x':20111003,'y':12},{'x':20111004,'y':2},{'x':20111005,'y':3},{'x':20111006,'y':1},{'x':20111007,'y':2},{'x':20111008,'y':7},{'x':20111009,'y':2},{'x':20111010,'y':7}],
    [{'x':20111001,'y':3},{'x':20111002,'y':10},{'x':20111003,'y':13},{'x':20111004,'y':3},{'x':20111005,'y':12},{'x':20111006,'y':14},{'x':20111007,'y':6},{'x':20111008,'y':1},{'x':20111009,'y':7},{'x':20111010,'y':9}],
    [{'x':20111001,'y':4},{'x':20111002,'y':4},{'x':20111003,'y':14},{'x':20111004,'y':14},{'x':20111005,'y':10},{'x':20111006,'y':15},{'x':20111007,'y':3},{'x':20111008,'y':0},{'x':20111009,'y':3},{'x':20111010,'y':12}]
    ];

    var colors = [
    'steelblue',
    'green',
    'red',
    'purple'
    ]

    var b =[];


    var parseDate = d3.time.format("%Y%m%d").parse;

    data.forEach(function (d) {
        f = d;
        f.forEach(function(f){

            b.push(parseDate(String(f.x)));
        })
    })

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

    var x = d3.time.scale()
    .domain([d3.extent(b)])
    .range([0, width]);

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

    var xAxis = d3.svg.axis()
    .scale(x)
    .tickSize(-height)
    .tickPadding(10)    
    .tickSubdivide(true)    
    .orient("bottom");  

    var yAxis = d3.svg.axis()
    .scale(y)
    .tickPadding(10)
    .tickSize(-width)
    .tickSubdivide(true)    
    .orient("left");

    var zoom = d3.behavior.zoom()
    .x(x)
    .y(y)
    .scaleExtent([1, 10])
    .on("zoom", zoomed);    



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

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

    svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

    svg.append("g")
    .attr("class", "y axis")
    .append("text")
    .attr("class", "axis-label")
    .attr("transform", "rotate(-90)")
    .attr("y", (-margin.left) + 10)
    .attr("x", -height/2)
    .style("text-anchor", "end")
    .text("Ventas (Miles €)");

    svg.append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("width", width)
    .attr("height", height);

    var line = d3.svg.line()
    .interpolate("linear")  
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });     

    svg.selectAll('.line')
    .data(data)
    .enter()
    .append("path")
    .attr("class", "line")
    .transition()
    .attr("clip-path", "url(#clip)")
    .attr('stroke', function(d,i){          
        return colors[i%colors.length];
    })
    .attr("d", line);       

    var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);


    var points = svg.selectAll('.dots')
    .data(data)
    .enter()
    .append("g")
    .attr("class", "dots")
    .attr("clip-path", "url(#clip)");   

    points.selectAll('.dot')
    .data(function(d, index){       
        var a = [];
        d.forEach(function(point,i){
            a.push({'index': index, 'point': point});
        });     
        return a;
    })
    .enter()
    .append('circle')
    .attr('class','dot')
    .attr("r", 2.5)
    .attr('fill', function(d,i){    
        return colors[d.index%colors.length];
    })  
    .attr("transform", function(d) { 
        return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; }
        ).on("mouseover", function(d) {      
            div.transition()        
            .duration(200)      
            .style("opacity", .9);      
            div .html(d.point.x + "K<br/>"  + d.point.y)  
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY) + "px");    
        })                  
        .on("mouseout", function(d) {       
            div.transition()        
            .duration(500)      
            .style("opacity", 0);   
        })

        function zoomed() {
            svg.select(".x.axis").call(xAxis);
            svg.select(".y.axis").call(yAxis);   
            svg.selectAll('path.line').attr('d', line);  

            points.selectAll('circle').attr("transform", function(d) { 
                return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; }
                );  
        }

    </script>

我可以用数字来制作，但不能用日期来实现它。我已经检查了其他示例以及它们是如何制作的，但无法找到在我的图表中对其进行编码的方法。

我想知道如何在x轴上显示日期。

Answer 1

您的问题是如何制作轴日期而不仅仅是数字？或者是如何使轴可以平移？如果它是第一个，请使用以下代码：

var x=d3.time.scale()
    .domain([minDate,maxDate])

minDate和maxDate必须为javascript Date objects。

D3：沿日期x轴平移

1 个答案: