如何设置一个值函数的多个属性？ [英] How to set multiple attributes with one value function?

问题描述

给出一个包含多个数据元素，如对象或数组基准，是有可能设置一个选择多个属性具有单个值的功能？

例如。是这样的：

  VAR数据= [{'X'：10，Y：20，R：5}];
d3.select（身体）。追加（'SVG'）。全选（'圈子'）
    的.data（数据）
    。进入（）。追加（'圈子'）
    .attr（'CX CY R'，函数（D）{
        返回[d.x，d.y，D.R]
    }）;
 

而不是：

  VAR数据= [{'X'：10，Y：20，R：5}];
d3.select（身体）。追加（'SVG'）。全选（'圈子'）
    的.data（数据）
    。进入（）。追加（'圈子'）
    .attr（'CX'，函数（D）{
        返回d.x;
    }）;
    .attr（'CY'，函数（D）{
        返回d.y;
    }）;
    .attr（'R'，函数（D）{
        返回D.R;
    }）;
 

解决方案

更新（2016年7月8日）这个答案适用于D3 3.x版 - 不4.x版对于后者版本，请参阅海耶斯添的回答，也是这个页面上。或...只是换 ATTR 与 ATTRS 在我的回答如下，并没有忘记要求/进口/脚本嵌入 D3选择的多。而且......千万不要错过有关使用。每个，这可能是对你有用的位。

---

是的，这可以通过在哈希传递（如jQuery的 CSS（）法）：

  d3.select（身体）。追加（'SVG'）。全选（'圈子'）
  的.data（数据）
。进入（）。追加（'圈子'）
  .attr（{
    CX：功能（D）{返回d.x; }，
    CY：功能（D）{返回d.y; }，
    R：功能（D）{返回D.R; }
  }）;
 

这适用于样式（）以及

如果再次发生在函数（D）{} 开始感觉太多了，这是另一种方法：

  d3.select（身体）。追加（'SVG'）。全选（'圈子'）
  的.data（数据）
  。进入（）。追加（'圈子'）
  。每个（函数（D）{
    d3.select（本）.attr（{
      CX：d.x，
      CY：d.y，
      R：D.R
    }）;
  }）
 

注：此功能只存在于d3.js v2.10.0或更高

Given a datum containing multiple data elements, such as an object or array, is it possible to set multiple attributes on a selection with a single value function?

E.g. something like:

var data = [{ 'x': 10, 'y': 20, 'r': 5 }];
d3.select('body').append('svg').selectAll('circle')
    .data(data)
    .enter().append('circle')
    .attr('cx cy r', function (d) {
        return [d.x, d.y, d.r];
    });

instead of:

var data = [{ 'x': 10, 'y': 20, 'r': 5 }];
d3.select('body').append('svg').selectAll('circle')
    .data(data)
    .enter().append('circle')
    .attr('cx', function (d) {
        return d.x;
    });
    .attr('cy', function (d) {
        return d.y;
    });
    .attr('r', function (d) {
        return d.r;
    });

解决方案

UPDATE (July 8th 2016) This answer applies to d3 v3.x — NOT v4.x. For the latter version, see Tim Hayes's answer, also on this page. Or... just swap attr with attrs in my answer below, and don't forget to require/import/script-embed d3-selection-multi. And... don't miss the bit about using .each, which may be useful to you.

---

Yeah, it's possible by passing in a hash (like jQuery's css() method):

d3.select('body').append('svg').selectAll('circle')
  .data(data)
.enter().append('circle')
  .attr({
    cx: function (d) { return d.x; },
    cy: function (d) { return d.y; },
    r:  function (d) { return d.r; }
  });

This works for style() as well.

If the reoccurring function (d) {} start to feel like too much, this is another approach:

d3.select('body').append('svg').selectAll('circle')
  .data(data)
  .enter().append('circle')
  .each(function (d) {
    d3.select(this).attr({
      cx: d.x,
      cy: d.y,
      r:  d.r
    });
  })

NOTE: this feature only exists in d3.js v2.10.0 or higher

这篇关于如何设置一个值函数的多个属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！