d3v4散点图-固定添加动画的域

Question

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

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

//旧版本3https://jsfiddle.net/oj2sg38z/2/

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

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