Question

我有四个由d3创建的div。我想在每一行上出现2个div。我想考虑div的宽度和高度。基本上连续会有2个div，如果一行中的一个div具有一定的高度，则该div的底部应该总是有20px的间隙到下面的div的下方最佳。我希望从第一个div的左边到行的第二个div的右边有一个20px的间隙

我有这样的数据obj：

    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并插入适当的值。像这样的东西。style("left", function(d){return d.left)。如果你有另一种解决方案我会很高兴来到这里。我愿意使用jQuery。

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

＆＃13;

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"}

]

  d3.selectAll("div.store")
  .data(data)
  .enter()
  .append("div")
  .classed("store", true)
  .html( function(d){return "<h1 class = 'name'>"+ d.name + "</h1>  <p class = 'desc'>" + d.desc + "</p>"})
  .style("position" , "absolute")

  var dim = d3.selectAll("div.store")
  .node().getBoundingClientRect()

  console.log(dim.width)

＆＃13;

.name{
			color: steelblue;
		}
		.store {
			width  : 200px;
			border: 1px solid;
		}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

＆＃13;

Answer 1

你很接近那里。您所要做的就是设置top和left样式属性。

＆＃13;

var data = [
{"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}
];

d3.selectAll('div.store')
    .data(data)
    .enter().append('div')
    .attr('class', 'store')
    .html(function(d) { return "<h1 class = 'name'>" + d.name + "</h1>  <p class = 'desc'>" + d.desc + "</p>"; })
    .style('position', 'absolute')
    .style('top', function(d) { return d.top + 'px'; })
    .style('left', function(d) { return d.left + 'px'; })
    .style('height', function(d) { return d.height + 'px'; })
    .style('width', function(d) { return d.width + 'px'; });

＆＃13;

.name {
color: steelblue;
}
.store {
border: 1px solid;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

＆＃13;

Answer 2

我看了一下这个，并准备用d3的.each函数替换你的嵌套jquery eaches，但是之后发生了你不能用css做这个并且放弃你的左/顶/绝对定位库中？

http://jsfiddle.net/Q5Jag/1761/ - 已编辑为高度执行calc css规则

body {
  background: #ffd;
  height: 600px;
  border: 1px solid blue;
}

div {
  border: 1px solid red;
  width: calc(50% - 10px);
  height: calc(50% - 10px);
  box-sizing: border-box;
  display: inline-block;
}

div:nth-child(2n) {
   margin-left: 20px;
 }

 div:nth-child(1),  div:nth-child(2) {
   margin-bottom: 20px;
 }

Answer 3

这是我在jQuery的帮助下提出的解决方案。

＆＃13;

var data = [
  {"name" : "alpha", "desc" : "This is Alpha" ,"text" : "<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam blanditiis saepe optio excepturi, amet ut, possimus nesciunt dolor sed magnam dolores eveniet, dignissimos commodi non autem facere voluptates esse sit.</p>"},
  {"name" : "Beta", "desc" : "This is Beta"},
  {"name" : "Gama", "desc" : "This is Gama"},
  {"name" : "Delta", "desc" : "This is Delta","text" : "<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam blanditiis saepe optio excepturi, amet ut, possimus nesciunt dolor sed magnam dolores eveniet, dignissimos commodi non autem facere voluptates esse sit.</p>"}

]

d3.selectAll("div.store")
  .data(data)
  .enter()
  .append("div")
  .classed("store", true)
  .html( function(d){return "<h1 class = 'name'>"+ d.name + "</h1>  <p class = 'desc'>" + d.desc + "</p>"})
  .style("position" , "absolute")
.append("div")
.html(function(d){ return d.text})
$(function(){


  data.forEach(function(e, i, arr){
    ///first column
    if(i % 2 == 0){

      e.left = $("div.store").eq(i).offset().left
      if(i == 0){
        e.top = $("div.store").eq(i).offset().top 
        e.height = $("div.store").eq(i).outerHeight()
      }else{
        e.top = $("div.store").eq(i -2).outerHeight() + 20
      }


      console.log($("div.store").eq(i)) 
    }
    else if(i % 2 == 1 ){
      e.left = $("div.store").eq(i -1).outerWidth() + 20;
      if(i == 1){
        e.top = $("div.store").eq(i).offset().top;
      }
      else{
        e.top = $("div.store").eq(i -2).outerHeight() + 20;
      }
    }
  })

  d3.selectAll("div.store")
  .style("left", function(d) {return d.left + "px"})
  .style("top", function(d) {return d.top + "px"})



  console.dir(data)

})

＆＃13;

*{
  margin: 0;
  padding: 0;
}
.name{
  color: steelblue;
}
.store {
  width  : 200px;
  border: 1px solid;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

＆＃13;

由d3.js创建的Positiong div

3 个答案: