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

我分叉你的笔并改变一些简单的事情。你基本上只是把你的秤弄错了 - 每个人都有问题。现在，序数量表比较复杂，可以覆盖更多的用例。

// 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

Answer 2

我实际上是在做相同的工作，我在平行坐标图表的v4中有一个工作版本（刷涂和移动坐标也适用）。 javascript代码位于this question。

移植并行协调代码从d3.js v3.5.16到4.0

2 个答案: