我有一个工作并行坐标图表,使用 d3.js 版本 3.5 可视化示例数据,您可以看到在 this CodePen here 中运行的代码.
我想重写代码以使用最新版本的 d3,版本 4.0。有人愿意审查我这样做的尝试吗?我尝试实现我在 change documentation 中读到的从 3.0 到 4.0 的更改。 .
不幸的是,数据点没有正确绘制,我的移植尝试可以看到 here .
// Extract the list of dimensions and create a scale for each.
x.domain(dimensions = d3.keys(data[0]).filter(function(d) {
if (d === "name") return false;
if (d === "Plant" || d === "Chemical" || d === "Pathway" || d === "Gene" || d === "Disease") {
y[d] = d3.scaleOrdinal().domain(data.map(function(p) {
return p[d];
})).range([h, 0]);
} else {
y[d] = d3.scaleLinear()
.domain(d3.extent(data, function(p) {
return +p[d];
}))
.range([h, 0]);
}
return true;
}));
// Add grey background lines for context.
background = svg.append("svg:g")
.attr("class", "background")
.selectAll("path")
.data(data)
.enter().append("svg:path")
.attr("d", path);
// Add blue foreground lines for focus.
foreground = svg.append("svg:g")
.attr("class", "foreground")
.selectAll("path")
.data(data)
.enter().append("svg:path")
.attr("d", path);
// Add a group element for each dimension.
var g = svg.selectAll(".dimension")
.data(dimensions)
.enter().append("svg:g")
.attr("class", "dimension")
.attr("transform", function(d) {
return "translate(" + x(d) + ")";
});
非常感谢您抽出时间。
最佳答案
我 fork 了你的 Pen 并改变了一些简单的东西。你基本上只是把秤弄错了——每个人都有秤的问题。序数尺度现在有点复杂,可以覆盖更多用例。
// X is a band scale
var x = d3.scaleBand().range([0, w]);
// ...
// Your 'category Y' is a point scale
y[d] = d3.scalePoint().domain(data.map(function(p) {
return p[d];
})).range([h, 0]);
我还更改了轴的方向,以便您可以看到标签。但这只是一个风格问题。
关于javascript - 将平行坐标代码从 d3.js v3.5.16 移植到 4.0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40383428/