javascript - 将 javascript 参数传递到 D3

Question

我目前正在 D3 中制作散点图矩阵。我的数据点结构如下所示:

      function plot(p) {
      var cell = d3.select(this);

      x.domain(domainByTrait[p.x]);
      y.domain(domainByTrait[p.y]);

      // Data points
      cell.selectAll("circle")
      .data(data)
      .enter().append("circle")
      .attr("cx", function (d) { return x(d[p.x]); })
      .attr("cy", function (d) { return y(d[p.y]); })
      .attr("r", 3)
      .style("fill", function (d) { return color(d.species); });
  }

我还有一个 JavaScript 函数:

      function create(columnsplit) {

      cell = svg.selectAll(".cell")
      .data(cross(traits, traits))
      .enter().append("g")
      .attr("class", "cell")
      .attr("transform", function (d) { return "translate(" + (n - d.i - 1) * size + "," + d.j * size + ")"; })
      .each(plot);

      cell.call(brush);

  }

指定绘图的位置。但是，我想用创建函数中的 columnsplit 参数替换硬编码的 d.species(除非 d.species 不像我最初想象的那样工作)。我到底该怎么做？

根据我的理解，以下是创建数据 d 的特征的方式:

domainByTrait = {},
      traits = d3.keys(data[0]).filter(function (d) { return d !== columnsplit; }),
      n = traits.length;

traits.forEach(function (trait) {
              domainByTrait[trait] = d3.extent(data, function (d) { return d[trait]; });
          });

我使用这个作为我的模板:http://bl.ocks.org/mbostock/4063663

谢谢

Answer 1

如果我理解，您想要访问名为“columnsplit”值的属性。为此，您只需使用索引器表示法来访问属性:

d[columnsplit]

换句话说，d.species 语法等同于 d["species"] ( reference )。