gpt4 book ai didi

javascript - 使用 d3.entries 键值对绘制多折线图

转载 作者:行者123 更新时间:2023-12-02 21:22:48 25 4
gpt4 key购买 nike

我想使用 d3.js 绘制多线图表。我在控制台中打印我的数据结构,它看起来像这样:

0:
key: student1
value: Array(50)
0: {date : 2017-09-11 11:51,score:50}
1: {date : 2017-09-11 12:53,score:90}
...

0:
key: student2
value: Array(50)
0: {date : 2017-09-11 11:51,score:20}
1: {date : 2017-09-11 12:53,score:30}
...

并将所有学生放在由不同线条表示的同一个图表中。 X 轴是日期,Y 轴是学生分数。

但似乎我在定义 X 和 Y 域时遇到问题,我无法通过 d.value.date 获取日期和得分值。

最佳答案

您无法通过使用 d.value.date 来获取 datevalue 分数,因为这些值嵌套在另一个对象中。您可以展平这些对象以尝试获取域。离开this example ,如果您表示您的结构如下:

data = [
{student: 'student1', date : '2017-09-11 11:51', score: 50},
{student: 'student1', date : '2017-09-11 12:53', score: 90},
...
{student: 'student2', date : '2017-09-11 11:51', score: 20},
{student: 'student2', date : '2017-09-11 12:53', score: 30},
...
]

您可以尝试像这样定义轴:

var parseDate = d3.timeParse("%Y-%m-%d %H:%M");
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

data.forEach(function(d) {
d.date = parseDate(d.date);
d.score = +d.score;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.score; })]);

我对 d3noob 的示例进行了一些修改以适应此数据(添加了更多数据点):

// Set the dimensions of the canvas / graph
var margin = {
top: 30,
right: 20,
bottom: 70,
left: 50
},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.timeParse("%Y-%m-%d %H:%M");

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

// Define the line
var priceline = d3.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.score);
});

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

// Get the data
var data = [
{
student: 'student1',
date: '2017-09-11 11:45',
score: 60
},
{
student: 'student1',
date: '2017-09-11 11:51',
score: 50
},
{
student: 'student1',
date: '2017-09-11 12:53',
score: 90
},
{
student: 'student1',
date: '2017-09-11 12:57',
score: 97
},
{
student: 'student2',
date: '2017-09-11 11:22',
score: 10
},
{
student: 'student2',
date: '2017-09-11 11:31',
score: 15
},
{
student: 'student2',
date: '2017-09-11 11:33',
score: 20
},
{
student: 'student2',
date: '2017-09-11 11:38',
score: 30
},
{
student: 'student2',
date: '2017-09-11 12:51',
score: 45
},
{
student: 'student2',
date: '2017-09-11 12:59',
score: 40
}
]

data.forEach(function(d) {
d.date = parseDate(d.date);
d.price = +d.price;
});

// Scale the range of the data
x.domain(d3.extent(data, function(d) {
return d.date;
}));
y.domain([0, d3.max(data, function(d) {
return d.score;
})]);

// Nest the entries by symbol
var dataNest = d3.nest()
.key(function(d) {
return d.student;
})
.entries(data);

// set the colour scale
var color = d3.scaleOrdinal(d3.schemeCategory10);

legendSpace = width / dataNest.length; // spacing for the legend

// Loop through each symbol / key
dataNest.forEach(function(d, i) {

svg.append("path")
.attr("class", "line")
.style("stroke", function() { // Add the colours dynamically
return d.color = color(d.key);
})
.attr("id", 'tag' + d.key.replace(/\s+/g, '')) // assign an ID
.attr("d", priceline(d.values));

// Add the Legend
svg.append("text")
.attr("x", (legendSpace / 2) + i * legendSpace) // space legend
.attr("y", height + (margin.bottom / 2) + 5)
.attr("class", "legend") // style the legend
.style("fill", function() { // Add the colours dynamically
return d.color = color(d.key);
})
.on("click", function() {
// Determine if current line is visible
var active = d.active ? false : true,
newOpacity = active ? 0 : 1;
// Hide or show the elements based on the ID
d3.select("#tag" + d.key.replace(/\s+/g, ''))
.transition().duration(100)
.style("opacity", newOpacity);
// Update whether or not the elements are active
d.active = active;
})
.text(d.key);

});

// Add the X Axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));

// Add the Y Axis
svg.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y));
body { font: 12px Arial;}

path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}

.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}

.legend {
font-size: 16px;
font-weight: bold;
text-anchor: middle;
}
<script src="https://d3js.org/d3.v5.min.js"></script>

希望这有帮助

关于javascript - 使用 d3.entries 键值对绘制多折线图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60807829/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com