javascript - 将平行坐标代码从 d3.js v3.5.16 移植到 4.0

Question

我有一个工作并行坐标图表，使用 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) + ")";
  });

非常感谢您抽出时间。

Answer 1

我 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]);

我还更改了轴的方向，以便您可以看到标签。但这只是一个风格问题。

Forked CodePen