个人中心
gpt4 book ai didi

javascript - 使用 d3 使用对象数组的折线图

转载 作者：行者123 更新时间：2023-12-01 02:29:25 24 4
gpt4 key购买 nike

我正在尝试使用 d3 和以下对象创建折线图:

var data = {x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],  y: [66, 67, 68, 68, 69, 70, 70, 75, 76, 78] }

这是我当前必须创建该行的代码:

<body>
<script>
var data = {x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],  y: [66, 67, 68, 68, 69, 70, 70, 75, 76, 78] };
var w=400;
var h=50;

var line = d3.svg.line()
             .x(function(d,i){return x(d.x[i])})
             .y(function(d,i){return y(d.y[i])})
             .interpolate("linear");

var svg = d3.select("body")
            .append("svg")
            .attr({
            "width":w,
            "height":h
            })

var path = svg.append("path")
              .attr({
                d:line(data),
                "fill":"none",
                "stroke":"black"
              })

</script>
</body>

感谢您的帮助!

最佳答案

这里的关键问题是，线生成器需要一个数组，其中每个项目代表一个点，而不是两个 x 和 y 值数组。行生成器的访问器方法允许您设置数据数组中每个对象的哪些属性用于 x 和 y 值:

When a line is generated, the x[/y] accessor will be invoked for each defined element in the input data array, being passed the element d, the index i, and the array data as three arguments. The default x[/y] accessor assumes that the input data are two-element arrays of numbers. (source)

因此，我们需要重新排列您的数据数组:

{x: [1,2,3,4,5...], y: [1,2,3,4,5] }

至:

[{x:1,y:1},{x:2,y:2},{x:3,y:3}...]

为此，我们可以使用:

var data = {x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],  y: [66, 67, 68, 68, 69, 70, 70, 75, 76, 78] };

var rearrangedData = data.x.map(function(d,i) {
  return {x:d,y:data.y[i]}; 
})

console.log(rearrangedData);

然后我们可以显示该行:

var data = {x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],  y: [66, 67, 68, 68, 69, 70, 70, 75, 76, 78] };
var w=400;
var h=200;

var rearrangedData = data.x.map(function(d,i) {
  return {x:d,y:data.y[i]}; 
})


var x = d3.scale.linear().domain([0,9]).range([0,w])
var y = d3.scale.linear().domain([65,80]).range([h,0])

var line = d3.svg.line()
             .x(function(d){ return x(d.x)})
             .y(function(d){return y(d.y)})
             .interpolate("linear");

var svg = d3.select("body")
            .append("svg")
            .attr({
            "width":w,
            "height":h
            })

var path = svg.append("path")
              .attr({
                "d":line(rearrangedData),
                "fill":"none",
                "stroke":"black"
              })
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

关于javascript - 使用 d3 使用对象数组的折线图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48429813/

24 4 0
文章推荐： javascript - 如何在每个具有新数据属性的元素之前插入元素
文章推荐： javascript - shopify js 购买 sdk 无法在 WordPress 中运行
文章推荐： javascript - 根据 API 响应访问特定值，并将其用于下一个请求 - Postman
文章推荐： javascript - 函数promise.all.then的返回值未定义
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com