javascript - D3JS V6:多线组
问题描述
我一直在尝试使用 D3JS V6 制作多线图。问题在于对数据进行分组(长格式)并尝试为每个组绘制路径。
我的数据遵循以下结构:
性交 | 阿诺 | D |
---|---|---|
男性 | 2000 | 25 |
男性 | 2001年 | 58 |
女性 | 2000 | 55 |
女性 | 2001年 | 75 |
全部的 | 2000 | 80 |
全部的 | 2001年 | 133 |
function dataviz2() {
var dataset;
h = 400
w = 650
padding = 40
count = 0
// Convertir Strings a Fechas
var parseTime = d3.timeParse('%Y')
// Convertir Fechas a Strings
var parseDate = d3.timeFormat('%Y')
var rowConverter = function (d) {
return {
Sexo: d.Sexo,
Año: parseTime(d.Año),
N: parseInt(d.N),
}
}
d3.csv('data.csv', rowConverter).then(function (data) {
dataset = data
dataset.sort(function (x, y) {
return d3.ascending(x.Año, y.Año)
})
dataBySex = d3.group(data, d => d.Sexo)
dataBySexGr = Array.from(dataBySex, ([sexo, value]) => ({ sexo, value }))
console.log(dataBySex)
console.log(dataBySexGr)
chart()
})
function chart() {
// Scale X
xScale = d3.scaleTime()
.domain([
d3.min(dataset, function (d) { return d.Año }),
d3.max(dataset, function (d) { return d.Año })
])
.range([padding, w - padding])
// Scale Y
yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function (d) { return d.N })])
.range([h - padding, padding])
// Create Axis
var xAxis = d3.axisBottom(xScale)
var yAxis = d3.axisLeft(yScale)
var svg = d3.select('#dataviz1')
.append('svg')
.attr('width', w)
.attr('height', h)
let id = 0;
const ids = function () {
return "line-" + id++
}
var lines = svg.selectAll('.line')
.data(dataBySexGr)
.join('path')
.attr("class", ids)
**.attr('d', d => {
return d3.line()
.x(d => x(d.Año))
.y(d => y(d.N))
})**
.attr('stroke', 'blue')
.attr('stroke-width', 3)
.attr('fill', 'none')
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(0,' + (h - padding) + ')')
.attr('visibility', 'visible')
.call(xAxis)
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(' + padding + ',0)')
.attr('visibility', 'visible')
.call(yAxis)
}
}
经过多次尝试,我知道 .attr('d', d => ...) 是问题所在。该函数的参数说“已声明'd',但从未读取其值”。当我检查 HTML 时,我收到了我正在寻找的不同的 3 条路径,但没有值,是一个函数。
我真的被困在这里,所以我很感激任何帮助。
谢谢!!
解决方案
d3.line 返回一个线生成器函数,您可以将该函数视为d
属性。您需要传递数据并执行该函数以获取路径数据:
.attr('d', d => {
return d3.line()
.x(d => x(d.Año))
.y(d => y(d.N))(d)
})
或者,您可以事先定义行生成器并简单地使用.attr('d',line)
:
const line = d3.line()
.x(d => x(d.Año))
.y(d => y(d.N))
selection.attr("d",line);
推荐阅读
- c# - 替换准备好的语句 OleDbCommand.Parameters 中的占位符
- flutter - FutureBuilder 中的 initialData - Flutter
- python - 将 JSON 响应转换为 pandas 数据框
- jenkins - Jenkins 在同一个仓库中共享库和 jenkinsFiles
- python - 如何使用 pandas 查找丢失和修改的行?
- c# - 在 .net 5 上配置 Elmah 时出现错误 CS 7036
- python - 在字符串列表中的特定元素之后插入一个元素
- qt - QML 列:可能的 QQuickItem::polish() 循环
- java - 同一类型的多个对象如何同时与另一种类型的对象一起工作?
- html - 在移动设备和桌面设备上,单击“SERVICES”下拉菜单时,会自动选择“Rail”选项