Настройка домена многолинейной диаграммы d3v4 и анимация

Question

Я преобразовывал линейную диаграмму d3 старой версии и пытаюсь улучшить входные данные, чтобы домен рассчитывался правильно.

// текущая версия 4 https://jsfiddle.net/497tmhu0/3/

            x.domain(d3.extent(data, function(d) { return d.date; }));

            y.domain([
                d3.min(cities, function(c) { return d3.min(c.values, function(d) { return d.temperature; }); }),
                d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.temperature; }); })
            ]);

для использования одного набора json и для исправления кода правильно ли это вычисление домена x?

            x.domain([
                d3.min(cities, function(c) { return d3.min(c.values, function(d) { return d.date; }); }),
                d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.date; }); })
            ]);

---

• Я стремлюсь объединить ввод данных в более чистую ситуацию ОДНОГО типа источника.
• Также измените структуру на более метку, соглашение об именах значений, тогда укажите c в «температуре» - например, «Сан-Франциско» должно быть меткой
• Исправьте ось x, она выглядит сломанной, или галочки имеют странный формат

• Исправить пропадание текста выкл, возникающий в конце линий - возможно, вырезанный по краям диаграммы - возможно, просто изменение поля - «справа: 55»

          var data = [{
            "date": "20111003",
            "New York": 53.3,
            "San Francisco": 22.8
          }, {
            "date": "20111004",
            "New York": 55.7,
            "San Franciscok": 38.8
          }, {
            "date": "20111005",
            "New York": 55.7,
            "San Franciscok": 38.8
          }];
  
  
          var cities = [{
            "id": "New York",
            "values": [{
              "date": 20111003,
              "temperature": 34
            }, {
              "date": 20111004,
              "temperature": 42
            }, {
              "date": 20111005,
              "temperature": 23
            }]
          }, {
            "id": "San Francisco",
            "values": [{
              "date": 20111003,
              "temperature": 22
            }, {
              "date": 20111004,
              "temperature": 52
            }, {
              "date": 20111005,
              "temperature": 62
            }]
          }]
  

---

8 июня - выдающееся исправление

jsfiddle.net / 497tmhu0 / 5 - Я очень хочу объединить введенные данные в более чистый O Ситуация с типом источника NE. Также измените структуру на более - метку, соглашение об именах значений, затем укажите c в «температуре» - например, «Сан-Франциско» должно быть меткой, ось x кажется сломанной или галочки имеют странный формат, текст пропадает. выкл, возникающий в конце линий - возможно, отрезанный от краев диаграммы - возможно, просто изменение поля - "right: 55" -