D3.js折线图:轴固定位置

Question

我得到了一个用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; });
  });

但是高度比屏幕尺寸高，所以我需要滚动

但是现在我需要一直看到坐标轴。所以我需要固定位置的x轴和y轴

我尝试了CSS position:fixed，但是没有效果。

请帮帮我。

Answer 1

尝试在生成轴时应用该样式。

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

Answer 2

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