JS-D3多线时间序列图

Question

我需要制作带有D3的多个时间序列样式图形。以该示例为基础：example

代码如下：

    <script type="text/javascript">
        var data =  [{fecha: "2019-03-16", partidos: "1", goles: "0", tarjetas: "0"},
        {fecha: "2019-03-23", partidos: "1", goles: "1", tarjetas: "0"},
        {fecha: "2019-03-30", partidos: "1", goles: "0", tarjetas: "1"},
        {fecha: "2019-04-06", partidos: "0", goles: "0", tarjetas: "0"},
        {fecha: "2019-04-13", partidos: "1", goles: "2", tarjetas: "0"},
                        ];          

    // Draw a line chart
    var svg = d3.select('#graf_act_tiempo'),
        margin = { top: 20, right: 50, bottom: 30, left: 50 },
        width = +svg.attr('width') - margin.left - margin.right,
        height = +svg.attr('height') - margin.top - margin.bottom,
        g = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    // Function to convert a string into a time
    var parseTime = d3.time.format('%Y-%m-%d').parse;

    // Set the X scale
    var x = d3.time.scale().range([0, width], 0.5);
    // Set the Y scale
    var y = d3.scale.linear().range([height, 0]);
    // Set the color scale
    var color = d3.scale.category10();

    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickSize(6, 0)
    .tickFormat(d3.time.format('%d/%m/%y'));

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickSize(1, 0)
    .tickFormat(d3.format("d"));

    var line = d3.svg.line()
    // .interpolate("basis")
    .x(function(d) {
      return x(d.fecha);
    })
    .y(function(d) {
      return y(d.worth);
    });

    // load the data
    // Select the important columns
    color.domain(d3.keys(data[0]).filter(function(key) {
        return key !== "fecha";
    }));
    // Correct the types
    data.forEach(function(d) {
        d.fecha = parseTime(d.fecha);
    });
    //console.log(data);

      var currencies = color.domain().map(function(name) {
        return {
          name: name,
          values: data.map(function(d) {
            return {
              fecha: d.fecha,
              worth: +d[name]
            };
          })
        };
      });
      //console.log(currencies)
      // Set the X domain
      x.domain(d3.extent(data, function(d) {
        return d.fecha;
      }));

      // Set the Y domain
      y.domain([
        d3.min(currencies, function(c) {
          return d3.min(c.values, function(v) {
            return v.worth;
          });
        }),
        d3.max(currencies, function(c) {
          return d3.max(c.values, function(v) {
            return v.worth;
          });
        })
      ]);

      // Set the X axis
      g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", "rotate(-65)");
      // Set the Y axis
      g.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
//      .attr("transform", "rotate(-90)")
        .attr("y", 0)
        .attr("x", 60)
        .attr("dy", "4px")
        .style("text-anchor", "end")
        .text("Cantidad");

      // Draw the lines
      var currency = g.selectAll(".currency")
        .data(currencies)
        .enter().append("g")
        .attr("class", "currency");

      currency.append("path")
        .attr("class", "line")
        .attr("d", function(d) {
          return line(d.values);
        })
        .style("stroke", function(d) {
          return color(d.name);
        });
      // Add the circles
      currency.append("g").selectAll("circle")
        .data(function(d){return d.values})
        .enter()
        .append("circle")
        .attr("r", 2)
        .attr("cx", function(dd){return x(dd.fecha)})
        .attr("cy", function(dd){return y(dd.worth)})
        .attr("fill", "none")
        .attr("stroke", function(d){return color(this.parentNode.__data__.name)});

        // Add label to the end of the line
      currency.append("text")
        .attr("class", "label")
        .datum(function (d) {
          return {
            name: d.name,
            value: d.values[d.values.length - 1]
          };
        })
        .attr("transform", function (d) {
          return "translate(" + x(d.value.fecha) + "," + y(d.value.worth) + ")";
        })
        .attr("x", 6)
        .attr("dy", ".35em")
        .text(function (d) {
          return d.name;
      });

    </script>

获得以下结果：

我需要帮助进行这些更改：

1）“ y”轴的图例“ cantidad”位于轴的最大值上方（顶部）或轴的左侧。

2）未切割的“ x”轴值可以很好地读取

感谢您进行改进的提示。

Answer 1

1）向svg添加更多值，向y轴添加.attr（“ x”，-20） 2）在svg中添加更多评估者底部