javascript - 将对象属性传递给 D3 'enter()'

Question

我有一个具有许多属性的对象，我尝试通过将特定属性传递给下面的 barChart 函数来创建条形图。但是当它到达 attr 时，properyItem 是未定义。不知道该怎么做。如果我对属性名称进行硬编码，它就可以工作(例如:d.MURDER)。

var barChart = function(propertyItem) {
    if (propertyItem == null) {
        propertyItem = "ROBBERY";
    }
    var svg = d3.select("body").append("svg");
    svg.attr("width", w).attr("height", h);
    svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
            return i * (w / dataset.length);
        })
        .attr("height", function(d) {
            return d.propertyItem * 4;
        })
        .attr("width", w / dataset.length - barPadding)
        .attr("y", function(d) {
            return h - d.propertyItem * 4;
        })
}

Answer 1

假设您的 propertyItem 确实存在于 dataset 中，解决方案很简单:使用 bracket notation 。例如:

.attr("height", function(d) {
    return d[propertyItem] * 4;
});

原因是函数内的 propertyItem 只是一个字符串。如果你这样做...

d.propertyItem

...浏览器不会查找字符串的相同属性，而是查找字面上名为 propertyItem 的属性。让我们展示一下:

var obj = {
  foo: "this is what I want!",
  propertyItem: "this is not what I want..."
};
var propertyItem = "foo";
console.log("obj.propertyItem returns: " + obj.propertyItem)
console.log("obj[propertyItem] returns: " + obj[propertyItem])

因此，我认为您的 dataset 数组中没有字面上名为 propertyItem 的属性，它返回 undefined。

这是一个包含一些虚拟数据和代码的演示，但使用括号表示法:

var dataset = [{
  foo: 80,
  bar: 10
}, {
  foo: 30,
  bar: 12
}, {
  foo: 70,
  bar: 11
}, {
  foo: 42,
  bar: 17
}];
var w = 400,
  h = 200,
  barPadding = 10;
var barChart = function(propertyItem) {
  if (propertyItem == null) {
    propertyItem = "ROBBERY";
  }
  var svg = d3.select("body").append("svg");
  svg.attr("width", w).attr("height", h);
  svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
      return i * (w / dataset.length);
    })
    .attr("height", function(d) {
      return d[propertyItem] * 4;
    })
    .attr("width", w / dataset.length - barPadding)
    .attr("y", function(d) {
      return h - d[propertyItem] * 4;
    })
}
barChart("foo")

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>