Javascript 由d3.js创建的定位div

我有四个由d3创建的div。我希望每行显示2个div。我想考虑一下div的宽度和高度。基本上，一行有两个div，如果一行中的一个div有一定的高度，那么从该div的底部到顶部以下的div之间应该始终有20px的间隙。从第一个div的左边到第二个div的右边有一个20px的间距

我有这样的数据对象：

    var data = [
        {"name" : "alpha", "desc" : "This is Alpha"},
        {"name" : "Beta", "desc" : "This is Beta"},
        {"name" : "Gama", "desc" : "This is Gama"},
        {"name" : "Delta", "desc" : "This is Delta"},

    ]

    {"name" : "alpha", "desc" : "This is Alpha", "top" : 0, "left"  : 0,"width" : 200, "height" : 300 },
    {"name" : "Beta", "desc" : "This is Beta", "top" : 0, "left"  : 220,"width" : 200, "height" : 300},
    {"name" : "Gama", "desc" : "This is Gama", "top" : 320, "left"  : 0,"width" : 250, "height" : 350},
    {"name" : "Delta", "desc" : "This is Delta", "top" : 320, "left"  : 270,"width" : 250, "height" : 350},

我希望这样做：

    var data = [
        {"name" : "alpha", "desc" : "This is Alpha"},
        {"name" : "Beta", "desc" : "This is Beta"},
        {"name" : "Gama", "desc" : "This is Gama"},
        {"name" : "Delta", "desc" : "This is Delta"},

    ]

    {"name" : "alpha", "desc" : "This is Alpha", "top" : 0, "left"  : 0,"width" : 200, "height" : 300 },
    {"name" : "Beta", "desc" : "This is Beta", "top" : 0, "left"  : 220,"width" : 200, "height" : 300},
    {"name" : "Gama", "desc" : "This is Gama", "top" : 320, "left"  : 0,"width" : 250, "height" : 350},
    {"name" : "Delta", "desc" : "This is Delta", "top" : 320, "left"  : 270,"width" : 250, "height" : 350},

我正在尝试将尺寸添加到obj中，以便可以轻松使用

.style

并插入适当的值。类似这样的。

样式（“left”，函数（d）{return d.left）

。如果您有其他解决方案，我很乐意在这里提供。我愿意使用jQuery

我的代码只显示角落里的div，因为位置是绝对的

var数据=[
{“name”：“alpha”，“desc”：“This is alpha”}，
{“name”：“Beta”，“desc”：“This is Beta”}，
{“name”：“Gama”，“desc”：“This is Gama”}，
{“name”：“Delta”，“desc”：“This is Delta”}
]
d3.选择全部（“分区存储”）
.数据（数据）
.输入（）
.附加（“div”）
.classed（“商店”，真实）
.html（函数（d）{return”“+d.name+”
“+d.desc+”
“}）
.style（“位置”、“绝对”）
var dim=d3。选择全部（“div.store”）
.node（）.getBoundingClientRect（）文件
console.log（尺寸宽度）

.name{
颜色：钢蓝色；
}
.商店{
宽度：200px；
边框：1px实心；
}

---

您就快到了。您所要做的就是设置

顶部

和

左侧

样式属性

var数据=[
{“name”：“alpha”，“desc”：“这是alpha”，“top”：0，“left”：0，“width”：200，“height”：300}，
{“name”：“Beta”，“desc”：“这是Beta”，“top”：0，“left”：220，“width”：200，“height”：300}，
{“name”：“Gama”，“desc”：“这是Gama”，“top”：320，“left”：0，“width”：250，“height”：350}，
{“name”：“Delta”，“desc”：“这是Delta”，“top”：320，“left”：270，“width”：250，“height”：350}
];
d3.选择全部（'div.store'）
.数据（数据）
.enter（）.append（'div'）
.attr（'class'，'store'）
.html（函数（d）{return”“+d.name+”
“+d.desc+”
“；}）
.style（'位置'，'绝对'）
.style（'top'，函数（d）{返回d.top+'px'；}）
.style（'left'，函数（d）{返回d.left+'px'；}）
.style（'height'，function（d）{返回d.height+'px'；}）
.style（'width'，function（d）{return d.width+'px'；}）；

.name{
颜色：钢蓝色；
}
.商店{
边框：1px实心；
}

---

您就快到了。您所要做的就是设置

顶部

和

左侧

样式属性

var数据=[
{“name”：“alpha”，“desc”：“这是alpha”，“top”：0，“left”：0，“width”：200，“height”：300}，
{“name”：“Beta”，“desc”：“这是Beta”，“top”：0，“left”：220，“width”：200，“height”：300}，
{“name”：“Gama”，“desc”：“这是Gama”，“top”：320，“left”：0，“width”：250，“height”：350}，
{“name”：“Delta”，“desc”：“这是Delta”，“top”：320，“left”：270，“width”：250，“height”：350}
];
d3.选择全部（'div.store'）
.数据（数据）
.enter（）.append（'div'）
.attr（'class'，'store'）
.html（函数（d）{return”“+d.name+”
“+d.desc+”
“；}）
.style（'位置'，'绝对'）
.style（'top'，函数（d）{返回d.top+'px'；}）
.style（'left'，函数（d）{返回d.left+'px'；}）
.style（'height'，function（d）{返回d.height+'px'；}）
.style（'width'，function（d）{return d.width+'px'；}）；

.name{
颜色：钢蓝色；
}
.商店{
边框：1px实心；
}

---

我在jQuery的帮助下想出了一个解决方案

var数据=[
{“name”：“alpha”，“desc”：“这是alpha”，“text”：“Lorem ipsum dolor sit amet，concertetur adipising elite.Numquam blanditiis saepe optio excepturi，amet ut，possimus nesciunt dolor sed magnanm dolores eveniet，dignessimos commodi non autem facere voluts esse esse des des see see see site.
”，
{“name”：“Beta”，“desc”：“This is Beta”}，
{“name”：“Gama”，“desc”：“This is Gama”}，
{“name:“Delta”，“desc:”这是Delta”，“text:“Lorem ipsum dolor sit amet，concertetur adipising elite.Numquam blanditiis saepe optio excepturi，amet ut，possimus nesciunt dolor sed magnanm dolores eveniet，dignessimos commodi non autem facere voluts esse esse ess.
”）
]
d3.选择全部（“分区存储”）
.数据（数据）
.输入（）
.附加（“div”）
.classed（“商店”，真实）
.html（函数（d）{return”“+d.name+”
“+d.desc+”
“}）
.style（“位置”、“绝对”）
.附加（“div”）
.html（函数（d）{return d.text}）
$（函数（）{
forEach（函数（e，i，arr）{
///第一列
如果（i%2==0）{
e、 左=$（“div.store”）.eq（i）.offset（）左
如果（i==0）{
e、 top=$（“div.store”）.eq（i）.offset（）.top
e、 高度=$（“div.store”）.eq（i）.outerHeight（）
}否则{
e、 top=$（“div.store”）.eq（i-2）.outerHeight（）+20
}
console.log（$（“div.store”）.eq（i））
}
else if（i%2==1）{
e、 左=$（“div.store”）.eq（i-1）.outerWidth（）+20；
如果（i==1）{
e、 top=$（“div.store”）.eq（i）.offset（）.top；
}
否则{
e、 top=$（“div.store”）.eq（i-2）.outerHeight（）+20；
}
}
})
d3.选择全部（“分区存储”）
.style（“left”，函数（d）{返回d.left+“px”}）
.style（“top”，函数（d）{返回d.top+“px”}）
console.dir（数据）
})

*{
保证金：0；
填充：0；
}
.姓名{
颜色：钢蓝色；
}
.商店{
宽度：200px；
边框：1px实心；
}

---

我在jQuery的帮助下想出了一个解决方案

var数据=[
{“名称”：“alpha”，“desc”：“这是alpha”，“文本”：“Lorem ipsum dolor sit amet，concertetur adipising elite.Numquam blanditiis saepe optio excepturi，amet ut，possimus nesciunt dolor sed magnam dolores eveniet