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; });
  });

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

但现在我需要一直看到Axes。所以我需要x轴和具有固定位置的y轴

我尝试了CSS位置：已修复，但没有效果。

请帮帮我。

Answer 1

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

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

Answer 2

# global parameter
job_id = int(time.time())


def airflow_job1(job_id, **context):
    print("in airflow_job1, current timestamp: %s" % job_id)

def airflow_job2(job_id, **context):
    print("in airflow_job2, current timestamp: %s" % job_id)

airflow_job1 = PythonOperator(
    task_id='airflow_job1',
    provide_context=True,
    python_callable=airflow_job1,
    op_kwargs={'job_id': job_id},
    dag=globals()[dag_name]
)

airflow_job2 = PythonOperator(
    task_id='airflow_job2',
    provide_context=True,
    python_callable=airflow_job2,
    op_kwargs={'job_id': job_id},
    dag=globals()[dag_name]
)

 airflow_job1 >> airflow_job2

D3.js折线图：具有固定位置的轴

2 个答案: