d3.js - d3js 绘制未定义的折线图是不可迭代的
问题描述
我正在学习d3js
,我需要帮助来创建折线图。我在绘制简单对象和条形图方面相当成功。折线图似乎是一座需要攀登的陡峭山丘。
const data = [{
"LINE1": [
10,
11,
12,
15
]
},
{
"LINE2": [
21,
22,
23,
32
]
},
{
"LINE3": [
11,
12,
13,
15
]
}
]
// set the dimensions and margins of the graph
var margin = {
top: 50,
right: 100,
bottom: 130,
left: 120
},
width = 900 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#ca")
.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})`);
// Add X axis
var x = d3.scaleLinear()
.domain(d3.extent(data, (d) => d.length))
.range([0, width]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).ticks(5));
// Add Y axis
// I need help in this area, how can I get the min and max values set in the domain?
var y = d3.scaleLinear()
.domain([0, d3.max(data, (d) => d.values)])
.range([height, 0]);
svg.append("g")
.call(d3.axisLeft(y));
// Draw the line
// I need help in this area, how can I get the lines plotted, js gives error in this!
svg.selectAll(".line")
.data(data)
.enter()
.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 1.5)
.attr("d", (d) => {
console.log(d)
var k = d3.line()
.x((d) => x(d))
.y((d) => y(d))
(d.values);
console.log(k);
return k;
});
<div id="ca">
</div>
<script src="https://d3js.org/d3.v6.min.js"></script>
如何获得使用我拥有的数据格式绘制的折线图?
解决方案
我已经使您的示例正常工作,但是您需要在这里了解几件事:
你的数据结构非常混乱。如果要将对象数组作为数据,请确保所有对象都具有相同的键。如果你使用它很好
[{y: [...]}, {y: [...]}]
,但[{LINE1: [...]}, {LINE2: [...]}]
很难使用。我将您的数据更改为更像[[...], [...], [...]]
一个结构。不要
d3.line
为每一行创建单独的,只需创建一次并调用它。这是一个行工厂,这意味着它是一个函数,在调用时会返回一行。如果不共享,它可能会使用不同的域和范围,从而使图表变得困难甚至无用。如果函数中的第一个参数是
d
,则第二个参数是i
,数组中节点的索引。在这种情况下,您使用它从 开始x=0
,然后转到x=3
。你曾经d
试图获得那个价值。请记住数据的结构。你一直想访问
d.values
,但那从未存在过!
const data = Object.values({
"LINE1": [
10,
11,
12,
15
],
"LINE2": [
21,
22,
23,
32
],
"LINE3": [
11,
12,
13,
15
]
});
var line = d3.line()
.x((d, i) => x(i))
.y((d) => y(d));
// set the dimensions and margins of the graph
var margin = {
top: 50,
right: 100,
bottom: 130,
left: 120
},
width = 900 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#ca")
.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})`);
// Add X axis
var x = d3.scaleLinear()
.domain([0, d3.max(data, (d) => d.length)])
.range([0, width]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).ticks(5));
// Add Y axis
// I need help in this area, how can I get the min and max values set in the domain?
var y = d3.scaleLinear()
.domain([0, d3.max(data, (d) => Math.max(...d))])
.range([height, 0]);
svg.append("g")
.call(d3.axisLeft(y));
// Draw the line
// I need help in this area, how can I get the lines plotted, js gives error in this!
svg.selectAll(".line")
.data(data)
.enter()
.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 1.5)
.attr("d", (d) => line(d));
<div id="ca">
</div>
<script src="https://d3js.org/d3.v6.min.js"></script>
推荐阅读
- python - How to disable task from windows task scheduler via python script
- c++ - Explanation needed with AES_cfb128_encrypt() function
- c++ - namespace myspace { int x } 现在为什么 `myspace::x=3;` 会出错?
- r - 在R中合并后如何识别哪些数据属于哪个数据集?
- python - python suds 加载 wsdl 问题
- python - line.rstrip("\n") 和 line.rstrip(os.linesep) 的区别?
- powerbi - 在卡片可视化 Power BI 中将单词空白替换为 0
- react-native - 无法在实时设备中安装反应原生应用程序
- python - 从代码 python 中减少 if - elif-else 语句
- ios - 如何创建具有不同起始价格的订阅?