d3v4 散点图 - 修复域添加动画

Question

我正在尝试升级旧的散点图 -- 但映射域已成为一个问题，它无法正确呈现点的位置。

//版本4尝试 https://jsfiddle.net/z16u8j4c/1/

我尝试重构数据集，以便它可以包含标签信息 - 以便将来可能生成图例。

        var x = d3.scale.linear()
                  .domain([0, d3.max(data, function(d) { return d[0]; })])
                  .range([ 0, width ]);

        var y = d3.scale.linear()
                  .domain([0, d3.max(data, function(d) { return d[1]; })])
                  .range([ height, 0 ]);

我尝试使用 d3v4 标准在我的版本中修复它

        var x = d3.scaleLinear()
                  .domain([0, d3.max(data, function(d) { return d.value[0]; })])
                  .range([ 0, width ]);

        var y = d3.scaleLinear()
                  .domain([0, d3.max(data, function(d) { return d.value[1]; })])
                  .range([ height, 0 ]);

Answer 1

问题出在您的 d3.max 上。您的数据是具有不同系列值的对象数组。如果你想找到所有值的最大值，你必须遍历所有 data.values，所以一种方法是获取所有值并将其平放在数组上，然后找到它的最大值。

var x = d3
  .scaleLinear()
  .domain([0, d3.max(data.map(s => s.value).flat(), d => d[0])])
  .range([0, width])

var y = d3
  .scaleLinear()
  .domain([0, d3.max(data.map(s => s.value).flat(), d => d[1])])
  .range([0, height])

d3v4 散点图 - 修复域添加动画

d3v4 scatterplot - fixing the domain adding animations

scatter-plot

d3.js