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; }); })
            ]);

我热衷于将输入的数据合并到一个更简洁的ONE源类型情况中。
还可以将结构更改为更多标签-值-命名约定，然后在“温度”中进行具体说明-像“旧金山”应该是标签
修复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
          }]
        }]

6月8日-出色的修复程序

jsfiddle.net/497tmhu0/5-我热衷于将数据输入合并到一个更干净的ONE源类型情况中。还要将结构更改为更多的标签，值，命名约定，然后在“温度”中进行特定说明，例如“ San Francisco”应为标签，x轴显示为折断或刻度线格式错误，文本丢失线的末端-可能是从图表的边缘切下的-可能只是边距的变化-“右侧：55” –

d3v4多折线图域设置和动画

0 个答案: