D3.3：時間としてX軸に時刻を正しく表現することができません：分：秒の形式？

Anki2244：

M：SフォーマットIはHで時間を解析することができませんように私は正しくD3を使用してチャート形式でデータを表現する辞書のリストが、グラフdoesntのショーを持っています。

ここではいくつかの行は次のとおりです。

           var data= [{ val: "0", timestamp : "10:20:45"},
                 { val: "0", timestamp : "10:21:45" },
                { val: "0" , timestamp : "10:22.45"},
                { val: "0" , timestamp : "10:20:45"},
              { val : "267", timestamp : "10:21:45" },
              { val : "0", timestamp : "10:22.45"},
                 { val: "0" , timestamp : "10:24:45"},
              { val : "128", timestamp : "10:25:45" },
               { val : "0", timestamp : "10:30.45"},
              ]
            var parseDate = d3.time.format("%H:%M:%S").parse;

          // Set the ranges
            var x = d3.time.scale().range([0, graphWidth]);
              var y = d3.scale.linear().range([graphHeight, 0]);

         // Define the axes
          var xAxis = d3.svg.axis().scale(x)
                   .orient("bottom").ticks(5);
            var yAxis = d3.svg.axis().scale(y)
             .orient("left").ticks(5);

私は、私はほとんどすべてのものをカバーしている、と思うが、それは何らかの形で動作しません。私は新しいD3を使用しています、いくつかの助けを必要としています。完全なコード- https://jsfiddle.net/gaurav10022/p8oxdcey/

プリンス：

まず、あなたがユニークなキーを持っていて、特定の時間のための単一のポイントを見ることができるようにあなたのデータを正規化する必要があります。あなたが使用する必要があることについてはd3.nest。

これは、Aが作成されます時間になりますと表示したい値になりますが。newDatakeyvalues

var dataset = [{
    val: "0",
    timestamp: "10:20:45"
  },
  {
    val: "34",
    timestamp: "10:20:46"
  },
  {
    val: "45",
    timestamp: "10:20:47"
  },
  {
    val: "54",
    timestamp: "10:20:48"
  },
  {
    val: "0",
    timestamp: "10:21:45"
  },
  {
    val: "0",
    timestamp: "10:22.45"
  },
  {
    val: "0",
    timestamp: "10:20:45"
  },
  {
    val: "267",
    timestamp: "10:21:45"
  },
  {
    val: "0",
    timestamp: "10:22.45"
  },
  {
    val: "0",
    timestamp: "10:24:45"
  },
  {
    val: "128",
    timestamp: "10:25:45"
  },
  {
    val: "0",
    timestamp: "10:30.45"
  },
]

data = d3.nest()
  .key(function(d) {
    return d.timestamp
  })
  .rollup(function(leaves) {
    return d3.sum(leaves, function(d) {
      return +d.val
    })
  })
  .entries(dataset)

const firstValue = 0,
  lastValue = data.length,
  middleValue = Math.round((firstValue + lastValue) / 2),
  secondVaue = Math.round((firstValue + middleValue / 2)),
  thirdValue = Math.round((middleValue + lastValue) / 2)


var width = 500,
  height = 200;

var svg = d3.selectAll("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var xScale = d3.scalePoint()
  .domain(data.map(function(d) {
    return d.key
  }))
  .range([50, width - 50])
  .padding(0.5);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) {
    return d.value
  }) * 1.1])
  .range([height - 50, 10]);

var line = d3.line()
  .x(function(d, i) {
    return xScale(d.key)
  })
  .y(function(d, i) {
    return yScale(d.value)
  });

svg.append("path")
  .attr("d", line(data))
  .attr("stroke", "teal")
  .attr("stroke-width", "2")
  .attr("fill", "none");

var xAxis = d3.axisBottom(xScale)

if (data.length > 5) {
  const firstValue = 0,
    lastValue = data.length - 1,
    middleValue = Math.round((firstValue + lastValue) / 2),
    secondValue = Math.round((firstValue + middleValue / 2)),
    thirdValue = Math.round((middleValue + lastValue) / 2),
    tickArr = [data[firstValue].key, data[secondValue].key, data[middleValue].key, data[thirdValue].key, data[lastValue].key];

  xAxis
    .tickValues(tickArr);
}

var yAxis = d3.axisLeft(yScale).ticks(5);

svg.append("g").attr("transform", "translate(0,150)")
  .attr("class", "xAxis")
  .call(xAxis);

svg.append("g")
  .attr("transform", "translate(50,0)")
  .attr("class", "yAxis")
  .call(yAxis);

<script src="https://d3js.org/d3.v4.min.js"></script>

私はそれはあなたの問題を解決することを願っています。

私はあなたがこの例に見てお勧めします、それはあなたのチャートのアイデアを再構築するのに役立つかもしれません。https://bl.ocks.org/EfratVil/92f894ac0ba265192411e73f633a3e2f

頼むごとに更新コード- https://jsfiddle.net/wkb8vzjp/