javascript - 来自 JSON 的 d3 多线图-6ren

javascript - 来自 JSON 的 d3 多线图

转载作者：行者123 更新时间：2023-11-29 10:02:31

我有这个 JSON 结构:

[{
    "city": "roma",
    "giornata": [{"hour": 0, "vscore": 2.691172504799798, "sscore": 37476.67912706408}, {"hour": 1, "vscore": 2.691172504799798, "sscore": 37476.67912706408}, {"hour": 2, "vscore": 2.6911859886310534, "sscore": 37477.76228681598}, {"hour": 3, "vscore": 2.692891756586413, "sscore": 37633.63745016247}, {"hour": 4, "vscore": 2.7490858604464163, "sscore": 40331.835034215015}, {"hour": 5, "vscore": 3.6348376398556206, "sscore": 29087.830074293775}, {"hour": 6, "vscore": 5.227711033677134, "sscore": 40951.01373374646}, {"hour": 7, "vscore": 5.437638544676074, "sscore": 41884.0578795353}, {"hour": 8, "vscore": 5.478694300536231, "sscore": 41491.303030952506}, {"hour": 9, "vscore": 5.4692759563035125, "sscore": 41406.2244628412}, {"hour": 10, "vscore": 5.443814538954288, "sscore": 41843.69307948355}, {"hour": 11, "vscore": 5.422306701744998, "sscore": 41904.21264813825}, {"hour": 12, "vscore": 5.430029861802209, "sscore": 41834.62986331701}, {"hour": 13, "vscore": 5.4109556800533065, "sscore": 41794.032135620844}, {"hour": 14, "vscore": 5.40781751131936, "sscore": 41906.699275642364}, {"hour": 15, "vscore": 5.4276853171768575, "sscore": 42204.700654376065}, {"hour": 16, "vscore": 5.431391815372439, "sscore": 42038.98228259192}, {"hour": 17, "vscore": 5.452904669522696, "sscore": 42225.77758780385}, {"hour": 18, "vscore": 5.459166165306796, "sscore": 42521.80948063545}, {"hour": 19, "vscore": 5.4113071917201605, "sscore": 42211.7148629514}, {"hour": 20, "vscore": 5.346846713801516, "sscore": 40255.25859980825}, {"hour": 21, "vscore": 5.258902353621712, "sscore": 39863.6143315623}, {"hour": 22, "vscore": 5.099446294358522, "sscore": 38595.79782658543}, {"hour": 23, "vscore": 4.825210817812031, "sscore": 35445.99667251284}],
    "totale_vscore": 4.732977155119956,
    "totale_sscore": 39994.330896155014,
    "pop": 2953570.1564810127
}, {
    "city": "milan",
    "giornata": [{"hour": 0, "vscore": 2.82848132753263, "sscore": 32951.656649915116}, {"hour": 1, "vscore": 2.989182437431815, "sscore": 22400.365091162155}, {"hour": 2, "vscore": 3.089781672302136, "sscore": 25970.908167900478}, {"hour": 3, "vscore": 3.079852593000065, "sscore": 26122.539536044023}, {"hour": 4, "vscore": 3.127878555095266, "sscore": 28533.06300816934}, {"hour": 5, "vscore": 3.433688887459625, "sscore": 31280.682050177216}, {"hour": 6, "vscore": 4.460403545073164, "sscore": 41143.18408624148}, {"hour": 7, "vscore": 4.676520890455807, "sscore": 40440.9468380336}, {"hour": 8, "vscore": 4.5650214131720945, "sscore": 40922.767810551035}, {"hour": 9, "vscore": 4.534050693834924, "sscore": 40604.83122991684}, {"hour": 10, "vscore": 4.475014854496835, "sscore": 42008.856192005565}, {"hour": 11, "vscore": 4.449355201432976, "sscore": 40234.6533377194}, {"hour": 12, "vscore": 4.479651286256149, "sscore": 42297.87576207919}, {"hour": 13, "vscore": 4.532114009807487, "sscore": 42846.236555682415}, {"hour": 14, "vscore": 4.521175500387353, "sscore": 41932.90288440584}, {"hour": 15, "vscore": 4.462502028191485, "sscore": 41718.30395828536}, {"hour": 16, "vscore": 4.46901281686112, "sscore": 41710.48122672351}, {"hour": 17, "vscore": 4.5388217291954, "sscore": 40768.24927687489}, {"hour": 18, "vscore": 4.5271592249042865, "sscore": 41346.4872610591}, {"hour": 19, "vscore": 4.525012398546656, "sscore": 40461.46407886699}, {"hour": 20, "vscore": 4.4785954581843335, "sscore": 38842.93096854251}, {"hour": 21, "vscore": 4.300929936708735, "sscore": 36595.34193318566}, {"hour": 22, "vscore": 4.157413373148136, "sscore": 34567.45808410202}, {"hour": 23, "vscore": 4.097682551344804, "sscore": 32583.34061363281}],
    "totale_vscore": 4.116637599367636,
    "totale_sscore": 37011.89694171986,
    "pop": 2228858.085428001
}]

我需要创建一个 d3 折线图，其中每一行都是 JSON 的一个元素，例如:

“罗马”一行，X 轴为“小时”，Y 轴为“vscore”

“milan”的第二行，X 轴为“hour”，Y 轴为“vscore”

其他城市也是如此。

我的困难是从 json 动态创建 d3.svg.line()。

现在我的代码只用一行:

    var margin = {
            top: 20,
            right: 20,
            bottom: 50,
            left: 40
        },
        width = 900 - margin.left - margin.right,
        height = 290 - margin.top - margin.bottom;



    // Set the ranges
    var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);


    var y = d3.scale.linear().range([height, 0]);

    // Define the axes
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .innerTickSize(-height)
        .outerTickSize(0)
        .tickPadding(10);

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left").innerTickSize(-width)
        .outerTickSize(0)
        .tickPadding(10);




        // Define the line

//Here I don't know how to get line dynamically
    var valueline = d3.svg.line()
    .interpolate("basis")
    .x(function (d) {
        return x(d.hour);
    })
    .y(function (d) {
        return y(d.vscore);
    });


        // Adds the svg canvas
        var svg = d3.select("#dailyChart")
            .append("svg")
            // .call(zoom)
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");


                d3.json("data/ranking_sscore.json", function(error, data) {

                //Here I don't know how to cycle for get line from json

                    data = data[0].giornata

                    data.forEach(function (d) {

                            d.hour = d.hour;
                            d.vscore = +d.vscore;

                    });
                    x.domain(data.map(function (d) {
                        return d.hour;
                    }))
                    y.domain([0, d3.max(data,
                        function (d) {
                            return Math.max(d.vscore);
                        })]);

                  // Add the valueline path.
                    svg.append("path")
                    .attr("class", "line")
                    .attr("d", valueline(data))
                    .style("stroke", 1);

                  // Add the X Axis
                    svg.append("g")
                        .attr("class", "x axis")
                        .attr("transform", "translate(0," + height + ")")
                        .call(xAxis)
                        .selectAll("text")
                        .attr("y", 15)
                        .attr("x", 0)
                        .attr("dy", ".35em")


                    // Add the Y Axis
                    svg.append("g")
                        .attr("class", "y axis")
                        .call(yAxis);



    })

谢谢

最佳答案

D3 可以为您完成循环。

这是一个 D3v5 版本。

如果你想为许多城市着色，你可以使用 color 序号，参见注释行(你需要定义 color)。

var margin = { top: 20, right: 20, bottom: 50, left: 40 },
    svgWidth = 900,
    svgHeight = 290,
    width = svgWidth - margin.left - margin.right,
    height = svgHeight - margin.top - margin.bottom;

var data = [{
    "city": "roma",
    "giornata": [
        {"hour": 0, "vscore": 2.691172504799798, "sscore": 37476.67912706408},
        {"hour": 1, "vscore": 2.691172504799798, "sscore": 37476.67912706408},
        {"hour": 2, "vscore": 2.6911859886310534, "sscore": 37477.76228681598},
        {"hour": 3, "vscore": 2.692891756586413, "sscore": 37633.63745016247},
        {"hour": 4, "vscore": 2.7490858604464163, "sscore": 40331.835034215015},
        {"hour": 5, "vscore": 3.6348376398556206, "sscore": 29087.830074293775},
        {"hour": 6, "vscore": 5.227711033677134, "sscore": 40951.01373374646},
        {"hour": 7, "vscore": 5.437638544676074, "sscore": 41884.0578795353},
        {"hour": 8, "vscore": 5.478694300536231, "sscore": 41491.303030952506},
        {"hour": 9, "vscore": 5.4692759563035125, "sscore": 41406.2244628412},
        {"hour": 10, "vscore": 5.443814538954288, "sscore": 41843.69307948355},
        {"hour": 11, "vscore": 5.422306701744998, "sscore": 41904.21264813825},
        {"hour": 12, "vscore": 5.430029861802209, "sscore": 41834.62986331701},
        {"hour": 13, "vscore": 5.4109556800533065, "sscore": 41794.032135620844},
        {"hour": 14, "vscore": 5.40781751131936, "sscore": 41906.699275642364},
        {"hour": 15, "vscore": 5.4276853171768575, "sscore": 42204.700654376065},
        {"hour": 16, "vscore": 5.431391815372439, "sscore": 42038.98228259192},
        {"hour": 17, "vscore": 5.452904669522696, "sscore": 42225.77758780385},
        {"hour": 18, "vscore": 5.459166165306796, "sscore": 42521.80948063545},
        {"hour": 19, "vscore": 5.4113071917201605, "sscore": 42211.7148629514},
        {"hour": 20, "vscore": 5.346846713801516, "sscore": 40255.25859980825},
        {"hour": 21, "vscore": 5.258902353621712, "sscore": 39863.6143315623},
        {"hour": 22, "vscore": 5.099446294358522, "sscore": 38595.79782658543},
        {"hour": 23, "vscore": 4.825210817812031, "sscore": 35445.99667251284}],
    "totale_vscore": 4.732977155119956,
    "totale_sscore": 39994.330896155014,
    "pop": 2953570.1564810127
}, {
    "city": "milan",
    "giornata": [
        {"hour": 0, "vscore": 2.82848132753263, "sscore": 32951.656649915116},
        {"hour": 1, "vscore": 2.989182437431815, "sscore": 22400.365091162155},
        {"hour": 2, "vscore": 3.089781672302136, "sscore": 25970.908167900478},
        {"hour": 3, "vscore": 3.079852593000065, "sscore": 26122.539536044023},
        {"hour": 4, "vscore": 3.127878555095266, "sscore": 28533.06300816934},
        {"hour": 5, "vscore": 3.433688887459625, "sscore": 31280.682050177216},
        {"hour": 6, "vscore": 4.460403545073164, "sscore": 41143.18408624148},
        {"hour": 7, "vscore": 4.676520890455807, "sscore": 40440.9468380336},
        {"hour": 8, "vscore": 4.5650214131720945, "sscore": 40922.767810551035},
        {"hour": 9, "vscore": 4.534050693834924, "sscore": 40604.83122991684},
        {"hour": 10, "vscore": 4.475014854496835, "sscore": 42008.856192005565},
        {"hour": 11, "vscore": 4.449355201432976, "sscore": 40234.6533377194},
        {"hour": 12, "vscore": 4.479651286256149, "sscore": 42297.87576207919},
        {"hour": 13, "vscore": 4.532114009807487, "sscore": 42846.236555682415},
        {"hour": 14, "vscore": 4.521175500387353, "sscore": 41932.90288440584},
        {"hour": 15, "vscore": 4.462502028191485, "sscore": 41718.30395828536},
        {"hour": 16, "vscore": 4.46901281686112, "sscore": 41710.48122672351},
        {"hour": 17, "vscore": 4.5388217291954, "sscore": 40768.24927687489},
        {"hour": 18, "vscore": 4.5271592249042865, "sscore": 41346.4872610591},
        {"hour": 19, "vscore": 4.525012398546656, "sscore": 40461.46407886699},
        {"hour": 20, "vscore": 4.4785954581843335, "sscore": 38842.93096854251},
        {"hour": 21, "vscore": 4.300929936708735, "sscore": 36595.34193318566},
        {"hour": 22, "vscore": 4.157413373148136, "sscore": 34567.45808410202},
        {"hour": 23, "vscore": 4.097682551344804, "sscore": 32583.34061363281}],
    "totale_vscore": 4.116637599367636,
    "totale_sscore": 37011.89694171986,
    "pop": 2228858.085428001
}];

// Set the ranges
var x = d3.scaleLinear().range([0, width]);

var y = d3.scaleLinear().range([height, 0]);

// Define the axes
var xAxis = d3.axisBottom()
    .scale(x)
    .tickSize(-height);

var yAxis = d3.axisLeft()
    .scale(y)
    .tickSize(-width);

var valueline = d3.line()
    .curve(d3.curveBasis)
    .x( d => x(d.hour) )
    .y( d => y(d.vscore) );

// Adds the svg canvas
var g = d3.select("#dailyChart")
    .append("svg")
    // .call(zoom)
    .attr("width", svgWidth)
    .attr("height", svgHeight)
    .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

// d3.json("data/ranking_sscore.json", drawGraph );

drawGraph(null, data);

function drawGraph(error, data) {

    x.domain(d3.extent(data[0].giornata, d => d.hour));
    y.domain([0, d3.max(data, d => d3.max(d.giornata, g => g.vscore) ) + 1 ]);

    // Add the X Axis
    g.append("g")
        .attr("class", "x axis")
        .attr("transform", `translate(0,${height})`)
        .call(xAxis)
        .selectAll("text")
        .attr("y", 15)
        .attr("x", 0)
        .attr("dy", ".35em");

    // Add the Y Axis
    g.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    g.selectAll(".city")
     .data(data)
     .enter()
       .append("path")
       .attr('class', d => 'city' + ' ' + d.city)
       //.style("stroke", (d,i) => color(i) )
       .attr("d", d => valueline(d.giornata) );
}

.roma {
  fill:none;
  stroke:red;
}
.milan {
  fill:none;
  stroke:blue;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="dailyChart"></div>

关于javascript - 来自 JSON 的 d3 多线图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52556833/

文章推荐： MySQL 类似搜索，在列上使用非序列词

文章推荐： java - 为什么这个 for 循环 wordcount 方法在 java 中不起作用

文章推荐： javascript - 即使在调用 setState 后组件也不会重新渲染

文章推荐： mysql - 需要数据库设计指南方面的专业知识

检查用户输入的字符串在 C 中的格式为 "%d/%d/%d/%d/%d"
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and th
java - 使用此表单获取号码\d\s\d\d\s\d
我试图用这种形式简单地获取数字 28 integer+space+integer+integer+space+integer我试过这个正则表达式 \\s\\d\\d\\s 但我得到了两个数字11 和
d - D 语言是否完全依赖于 D 运行时？
最近一直在学习D语言。我一直对运行时感到困惑。从我能收集到的关于它的信息中，(这不是很多)我知道它是一种有助于 D 的一些特性的运行时。像垃圾收集一样，它与您自己的程序一起运行。但是既然 D 是编译
java - 这两种语法\\d\\d\\d 和\\d{3} 在所有环境中都一样吗？
想问一下这两个正则表达式有区别吗？ \d\d\d 与 \d{3} 我已经在我的本地机器上使用 Java 和 Windows 操作系统对此进行了测试，两者都工作正常并且结果相同。但是，当在 linux
go - 为什么我不能执行 fmt.Sprintf ("%d.%d.%d.%d"，一个...)？
我正在学习 Go，而且我坚持使用 Go 之旅(exercise-stringer.go:https://tour.golang.org/methods/7)。这是一些代码: type IPAddr
java - Java中的正则表达式: Pattern.编译( "J.*\\d[0-35-9]-\\d\\d-\\d\\d")
我在Java正则表达式中发现了一段令我困惑的代码: Pattern.compile( "J.*\\d[0-35-9]-\\d\\d-\\d\\d" ); 要编译的字符串是: String string
ruby - gsub(/(\d{4})\/(\d\d)\/(\d\d)\/(.*)/, '\1-\2-\3-\4' ) 是什么意思？
我在 ruby 代码上偶然发现了这个。我知道\d{4})\/(\d\d)\/(\d\d)\/(.*)/是什么意思，但是\1-\2-\3-\4 是什么意思？最佳答案 \1-\2-\3-\4 是 b
d - 如何在没有 D 运行时编译 D 应用程序？
我一直在努力解决这个问题，这让我很恼火。我了解 D 运行时库。它是什么，它做什么。我也明白你可以在没有它的情况下编译 D 应用程序。就像 XoMB 所做的那样。好吧，XoMB 定义了自己的运行时，但是
Java算法到 "multiply"两个列表列表((A),(B))*((C,C),(D,D))==((A,C,C),(A,D,D), (B,C,C),(B,D,D))
我有两个列表列表，子列表代表路径。我想找到所有路径。 List> pathList1 List> pathList2 当然是天真的解决方案: List> result = new ArrayList>
java - 如何清理和打印\d{3}\d{3}\d{2}\d{2}格式的数字
我需要使用 Regex 格式化一个字符串，该字符串包含数字、字母 a-z 和 A-Z，同时还包含破折号和空格。从用户输入我有02-219 8 53 24 输出应该是022 198 53 24 我正在
d - D 中的表达式模板
目标是达到与this C++ example相同的效果: 避免创建临时文件。我曾尝试将 C++ 示例翻译为 D，但没有成功。我也尝试过不同的方法。 import std.datetime : benc
d - D 中的完美转发？
tl;dr:你好吗perfect forwarding在 D？该链接有一个很好的解释，但例如，假设我有这个方法: void foo(T)(in int a, out int b, ref int c
d - D 中的抽象自动函数
有什么方法可以在 D 中使用abstract auto 函数吗？如果我声明一个类如下: class MyClass { abstract auto foo(); } 我收到以下错误: mai
d - D 中的切片交集
有没有人为内存中重叠的数组切片实现交集？算法在没有重叠时返回 []。当 pretty-print (使用重叠缩进)内存中重叠的数组切片时，我想要这个。最佳答案如果您确定它们是数组，那么只需取 p
d - D 中循环索引变量的默认类型是什么？
我已经开始学习 D，但我在使用 Andrei Alexandrescu 所著的 The D Programming Language 一书中提供的示例时遇到了一些麻烦。由于 int 和 ulong 类
d - D 中唯一的不可变类
如何创建一个不可变的类？我的目标是创建一个实例始终不可变的类。现在我只是用不可变的方法和构造函数创建了一个“可变”类。我将其称为 mData，m 表示可变。然后我创建一个别名 alias immut
d - D 中的扩展函数
不久前我买了《The D Programming Language》。好书，很有教育意义。但是，我在尝试编译书中列出的语言功能时遇到了麻烦:扩展函数。在这本书中，Andrei 写了任何可以像这样调用
d - D 中的无限数据结构
我在 D http://www.digitalmars.com/d/2.0/lazy-evaluation.html 中找到了函数参数的惰性求值示例我想知道如何在 D 中实现可能的无限数据结构，就像
c - printf ("%d %d %d\n",++a, a++,a) 输出
这个问题在这里已经有了答案: 12 年前关闭。 Possible Duplicate: Could anyone explain these undefined behaviors (i = i++
d - D:查找具有特定属性的所有功能
当前是否可以跨模块扫描/查询/迭代具有某些属性的所有函数（或类）？例如： source/packageA/something.d: @sillyWalk(10) void doSomething()

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 来自 JSON 的 d3 多线图