javascript - 在 D3 中创建嵌套后，如何将比例重置为新值？

Question

最后一个代码块中的问题，这是设置...

我正在导入一个有点大的 json 文件并将其转换为像这样的嵌套...

var dataURL = "season.json";
d3.json(dataURL, function(error, data) {
  if (error) throw error;
  var nest = d3.nest()
    .key(function(data) {
       return data.season;
    })
    .entries(data);

这使得巢样本像这样......

[{
"key": "2000",
"values": [{
    "season": 2000,
    "started": 54,
    "points": 8.4,
    "name": "joe"
}, {
    "season": 2000,
    "started": 1,
    "points": 5.7,
    "name": "jane"
}]
}, {
"key": "2001",
"values": [{
    "season": 2001,
    "started": 24,
    "points": 9.5,
    "name": "jill"
}, {
    "season": 2001,
    "started": 29,
    "points": 5.3,
    "name": "john"
}]

我正在为每个季节制作一个单独的 svg 并用圆圈填充它。这工作正常...

d3.select("#chart").selectAll("svg")
   .data(nest) // use nest for data
   .enter().append("svg") // for each datapoint, append an svg
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .attr('class', 'chart')
   .each(function(d, i) { // for each svg...
       rscale = d3.scale.linear()
                   .domain([d3.min(data, function(d) { return d.points; }), 
                d3.max(data, function(d) { return d.points; }) ])
                   .range([3,50]);
       d3.select(this).selectAll('circle')
          .data(d.values)
          .enter()
          .append("circle")
            .attr("class", function(d) {
                return d.name;
            })
            .attr("cy", 65)
            .attr("cx", function(d, i) {
                return i * 28 + 20;
            })
            .attr("r", function(d, i) {
                if (d.points >= 2) {
                   return rscale(d.points);
                } else {
                   return 2;
             }
    })

到目前为止工作得很好，但现在我想更改圆圈半径以反射(reflect)游戏的开始。我能够走到这一步...

$("button").click(function() {
     var selectedMetric = $(this).attr("id"); //returns either "started" or "points"
     d3.selectAll("circle")
         .transition()
         .duration(1000)
         .attr('r', function(d) {


              // I used rscale above successfully.
              // How do I set a new scale to reflect 
              // "started" values found in the nest??

              return d[selectedMetric]


         });
     });
});

Answer 1

为您可能想要在圆圈缩放中使用的数据集的每个属性构建比例“ map ”。 (d3.extent 在同一个 go 中完成 d3.min 和 d3.max 的工作)。然后你可以通过数据属性的名称来调用你想要的比例。

.each(function(d, i) { // for each svg...

  var scaleThese = ["started", "points"];
    var scales = {};
    scaleThese.forEach (function (prop) {
        scales[prop] = d3.scale.linear()
                       .domain(d3.extent(data, function(d) { return d[prop]; }))
                       .range([3,50]);
    });

// ... then later on ...        

    .attr('r', function(d) {
              // where selectedMetric is 'points' or 'started'
              return scales[selectedMetric](d[selectedMetric]);
     });

请注意，这些比例(与现有的 rscale 一样)对于每个 svg(数据的每个嵌套部分)都是本地的