Question

我已经搜索了许多关于获得给定Y的X（日期）值的答案。大多数都围绕着scale.invert（）函数。但是，我在执行任务时遇到了麻烦。

任务：我正在创建一个水位线（水位的时间序列线图）。我还绘制了最小/最大点和中线，所有这些都带有文本标签。见第一张图片。这是一个概念验证，所以我对事情有点肮脏。

问题：我想为这些最小/最大点添加相应的日期，我无法弄清楚如何。有一点需要注意，有时会有多个点具有相同的最小值或最大值。我无法： A）获取该点的正确日期， B）为每个实例添加日期（所有分钟和最大值，如果有倍数）文本。感谢您的帮助或指导。

下面是一些代码（我认为是立即相关的）。 Here's the codepen。我确定它不漂亮，我是D3和javascript的新手。

...

    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("Water Level (ft)");

    svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);

    var extent = d3.extent(data, function(d) {
      return d.level
    })
    var min = extent[0]
    var max = extent[1]
    var median = d3.median(data, function(d) {
      return d.level
    })

    var medianLine = svg.append("line")
      .attr("class", "medianLine")
      .attr("y1", y(median))
      .attr("y2", y(median))
      .attr("x1", 0)
      .attr("x2", width)

    var points = svg.selectAll("g")
      .data(data)
      .enter()
      .append("g")
      .filter(function(d) {
        return d.level === min || d.level === max;
      })
    points.append("circle")
      .attr("class", "dot")
      .attr("cx", function(d) {
        return x(d.date);
      })
      .attr("cy", function(d) {
        return y(d.level);
      })
      .attr("r", 5)
    points.append("text")
      .attr("x", function(d) {
        return x(d.date);
      })
      .attr("y", -20)
      .attr("font-family", "sans-serif")
      .attr("font-size", "12px")
      .style("text-anchor", "middle")
    points.selectAll("circle")
      .style("fill", function(d) {
        if (d.level === min) {
          return "red"
        } else {
          return "#009933"
        };
      });
    points.selectAll("text")
      .text(function(d) {
        if (d.level === min) {
          return "Min: " + min
        } else if (d.level === max) {
          return "Max: " + max
        }
      })
      .style("fill", function(d) {
        if (d.level === min) {
          return "red"
        } else if (d.level === max) {
          return "#246B24"
        }
      })
    svg.append("text")
      .attr("transform", "translate(" + (width + 3) + "," + y(median) + ")")
      .attr("dy", ".35em")
      .attr("text-anchor", "start")
      .style("fill", "#cc6600")
      .text(function(d) {
        return "Median: " + median
      })

...

Answer 1

在快速查看代码之后，date是您数据的属性，因此访问它时不会有任何问题，例如

points.selectAll("text")
  .text(function(d) {
    // date is accessible through d.date
    if (d.level === min) {
      return "Min: " + min + ' ' + d.date
    } else if (d.level === max) {
      return "Max: " + max + ' ' + d.date
    }
  })

如果您想格式化日期，请阅读about time formatting in d3

D3，从多个Y值中获取X值（日期），创建文本

1 个答案: