D3.js line chart: axis with fixed position

Question

i got a normal line chart written in d3.js

body {
    font: 10px sans-serif;
}

.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.x.axis {
position: fixed;
}

.x.axis path {
    display: none;
}

.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}



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

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

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

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

    var color = d3.scale.category10();

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

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

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

   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 + ")");

     d3.tsv("data.tsv", function(error, data) {
    if (error) throw error;

    color.domain(d3.keys(data[0]).filter(function(key) { return key !==        "date"; }));

      data.forEach(function(d) {
        d.date = parseDate(d.date);
       });

         var cities = color.domain().map(function(name) {
        return {
            name: name,
            values: data.map(function(d) {
                return {date: d.date, temperature: +d[name]};
            })
        };
    });

    x.domain(d3.extent(data, function(d) { return d.date; }));

    y.domain([
        d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
        d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
    ]);

    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("Temperature (ยบF)");

    var city = svg.selectAll(".city")
            .data(cities)
            .enter().append("g")
            .attr("class", "city");

    cities.forEach(function(d) {

        console.log(d);
    });
    city.append("path")
            .attr("class", "line")
            .attr("d", function(d) { return line(d.values); })
            .style("stroke", function(d) { return color(d.name); });

    city.append("text")
            .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
            .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
            .attr("x", 3)
            .attr("dy", ".35em")
            .text(function(d) { return d.name; });
  });

but the height is higher than the screen size, so i need to scroll

But now i need to see the Axes all the time. So i need the x-Axis and the y-Axis with fixed position

I tried CSS position:fixed but it had no effect.

Please help me.

Answer 1

window.onscroll = function() {myFunction()};

        function myFunction() {
            if(window.pageYOffset == 0)
            {
                d3.select("#test").nodes()[0].setAttribute("transform", "translate(200, " + 10  +")")
            }
             if (window.pageYOffset > 0) {
              d3.select("#test").nodes()[0].setAttribute("transform", "translate(200, " + window.pageYOffset  +")")
}
}

Answer 2

Try applying the style when you generate the axis.

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