Question

我正在尝试绘制一个D3散点图，其中垂直轴显示百分比，水平轴显示日期。应根据JSON对象值（'Percentage'和'dateAppeared'）绘制每个数据点。如果绝对精细的话，在y轴上绘制和绘图，但我无法使用使用日期的x轴来工作。下面的代码是我现在所处的位置。

散点图应该包含在500px乘500px svg内（因此范围和刻度尺寸）。

d3.json("php/sql-queries.php", function(data) {render(data);});

function render(data) {

  format = d3.time.format("%Y-%m-%d");
  xExtent = d3.extent(data, function(d) {return format(new Date(d.dateAppeared));});
  yScale = d3.scale.linear().domain([100, 0]).range([20,480]);
  xScale = d3.time.scale().domain(xExtent).range([20, 480]);

  yAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(480).ticks(10);
  xAxis = d3.svg.axis().scale(yScale).orient("right").tickSize(480).ticks(10);

  d3.select("svg").append("g").attr("id", "xAxis").call(xAxis);
  d3.select("svg").append("g").attr("id", "yAxisG").call(yAxis);

  d3.select("svg")
  .selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 5)
  .attr("cy", function(d) {return yScale(d.Percentage)})
  .attr("cx", function(d) {return
    xScale(format(new Date(d.dateAppeared)))
    });

};

JSON对象中的日期格式为'yyyy-mm-dd'。我已经尝试使用和不使用'format'函数（以及其他几种方式）计算范围和cx值，但我要么得到我现在拥有的东西（y轴上的神秘单一刻度值） .997，没有别的）或cx值的NaN错误。

也许我现在已经看了太长时间，但我无法弄清楚我在哪里出错了！如果他们采用那种格式和/或我需要更改y轴上的刻度，我不确定是否需要解析日期。任何帮助赞赏。

如何正确格式化和解释D3刻度的日期格式

0 个答案: