我有一个包含许多属性的对象，我试图通过将特定属性传递给下面的barChart函数来创建条形图。但是当它到达attr时，properyItem就是undefined。不知道该怎么做。如果我对其工作的属性名称进行硬编码（例如：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;
})
}
答案 0 :(得分：1)
假设dataset确实存在.attr("height", function(d) {
return d[propertyItem] * 4;
});
，解决方案很简单：使用bracket notation。例如：
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])的属性。让我们来表明：
propertyItem
因此，我认为dataset数组中没有任何属性名为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>socketIO.emit('SubAdd', { subs: ['0~Poloniex~BTC~USD'] });