在 D3 中设置多个属性,而无需提前知道它们将是什么
set multiple attributes in D3 without knowing what they are going to be ahead of time
我正在绑定在 d3 中设置多个属性,类似于这个答案中所做的:https://stackoverflow.com/a/20822552/1112097,但我希望能够将一组属性作为数组传递,以便相同的代码可以创建不同的元素。例如,以下数据应创建一个红色方块和一个绿色圆圈:
var data = [
{
name: "Element 1",
type: “rect”,
id: “rect01”,
attributes: [
{label: “x”, val: 0},
{label: “y”, val: 0},
{label: “width”, val: 10},
{label: “height”, val: 10},
],
styles: [
{label: “fill”, val: “none”},
{label: “stroke”, val: “#ff0000”}
]
},
{
name: "Element 2",
type: “circle”,
id: “circle01”,
attributes: [
{label: “cx”, val: 30},
{label: “cy”, val: 30},
{label: “r”, val: 10}
],
styles: [
{label: “fill”, val: “#00ff00”},
{label: “stroke”, val: “#0000ff”}
]
}
];
使用如下所示的内容:
var element = svg.selectAll(".element")
.data(data, function(d) {return d.id;});
var elementEnter = element.enter()
.append(function (d) {return d.type;})
.attr("class", "element")
.attr({
// what goes here?
})
.style({
// what goes here?
}):
我可以用什么来代替"这里有什么?"来设置属性(例如"x"、"cx"或"r"(和使用数据数组的值。
最好将数据
更改为以下格式:
attributes: {
"cx": 0,
"cy": 30,
"r": 10
},
styles: {
"fill: "#00ff00",
"stroke": "#0000ff"
}
这样你就可以简单地做...
var elementEnter = element.enter()
.append(function (d) {return d.type;})
.attr("class", "element")
.attr(function(d) {return d.attributes});
.style(function(d) {return d.styles});
如果您仍然想保持当前的格式,您可以执行以下操作...
var elementEnter = element.enter()
.append(function (d) {return d.type;})
.attr("class", "element")
.attr(function(d) {return arrToObj(d.attributes)});
.style(function(d) {return arrToObj(d.styles)});
function arrToObj(arr) {
var obj = {};
arr.forEach(function(keyValue){
obj[keyValue.label] = keyValue.val;
});
return obj;
}
试试这个。
function setAttributesAndStyles(d){
var attrs = {};
d.attributes.forEach(function(a){
attrs[a.label] = a.val;
});
var styles = {};
d.styles.forEach(function(a){
styles[a.label] = a.val;
});
d3.select(this).attr(attrs);
d3.select(this).attr(styles);
}
var element = svg.selectAll(".element")
.data(data, function(d) {return d.id;});
var elementEnter = element.enter()
.append(function (d) {
return svg.append(d.type).node(); //Returns the dom element
})
.attr("class", "element")
.each(setAttributesAndStyles);
请注意,selection.append(name)
语句要求名称为常量字符串或返回要追加的 DOM 元素的函数。
相关文章:
- 未设置变量的赋值| jQuery的作用是什么
- 在jquery中,从同一对象的属性设置输入字段和标签的正确方法是什么
- 什么是区域设置字符串
- 对我来说,用javascript设置这个函数最有效的方法是什么
- 在Backbone.js'上设置属性的模式是什么;模型和视图
- 在 React-Leaflet 库中为
- 函数设置为允许的范围是什么
- 铬:设置元素高度的脚本是什么
- 设置父位置的目的是什么
- 当溢出-x 设置为隐藏时处理可变高度图像的最佳方法是什么?
- 在默认情况下将可枚举设置为 false 的 JS 中创建对象属性的其他方法是什么
- 在 D3 中设置多个属性,而无需提前知道它们将是什么
- 错误的原因可能是什么:发送标头后无法设置标头
- 设置mongo的更好方法是什么
- Meteor.js中应用程序/用户设置的最佳实践是什么
- angular.js知道passport.js会话是否已设置的最佳方式是什么
- 根据用户在Javascript中的输入设置Date()对象的正确方法是什么
- 我设置的高度和宽度值与返回的值不一致的原因是什么
- 在Mac中学习javascript的简单环境设置是什么
- 对于动态变化的时间,设置nvd3 x域范围的最佳方法是什么