基本上,我想在其他div之后添加一个新的div: 不是一个子div,而是创建了第一个div的兄弟 。
使用下一个Code ,我在h4内得到一个div :(
let content = d3.select('#id_') let divs = content.selectAll('div') .data(data.keys) // It contains 8 objects, will return 8 divs. .enter() .append('div') .attr('class', 'mydiv') .append('h4') .text((d) => { return d.title }) .append('div') .attr('class', 'new-div')我得到了我需要的div数量。 但是,类new-div新div元素在h4标记内。
我想按此顺序创建一些东西:
<!-- Divs created with d3 --> <div class='mydiv'> <h4>Title</h4> </div> <div class='new-div'></div>在添加h4标签后我也尝试使用.insert :
... .append('h4') .text((d) => { return d.title }) .insert('div') .attr('class', 'new-div')但结果是一样的。
我知道这个过程中的层次结构不仅重要,而且它根据每个步骤构建标签。 有没有办法创建一个新的div元素,这是第一个div创建的兄弟?
Basically, I want to append a new div after other div: not a children div, but a sibling of the first div created.
Using the next Code, I'm getting a div inside a h4 :(
let content = d3.select('#id_') let divs = content.selectAll('div') .data(data.keys) // It contains 8 objects, will return 8 divs. .enter() .append('div') .attr('class', 'mydiv') .append('h4') .text((d) => { return d.title }) .append('div') .attr('class', 'new-div')I got the number of divs I need. However, new div element with class new-div is inside h4 tag.
I want to create something in this order:
<!-- Divs created with d3 --> <div class='mydiv'> <h4>Title</h4> </div> <div class='new-div'></div>I also tried using .insert after appending h4 tag:
... .append('h4') .text((d) => { return d.title }) .insert('div') .attr('class', 'new-div')But result is the same.
I know hierarchy in this process is not only important, but it builds tags according to each step. Is there a way to create a new div element that is sibling of first div created?
最满意答案
只是为了让您知道, 接受的答案 (在撰写本文时)创建了这种结构:
<div class='mydiv'> <h4>Title</h4> </div> <div class='mydiv'> <h4>Title</h4> </div> <div class='new-div'></div> <div class='new-div'></div>正如你所看到的,所有带有"new-div"类"new-div"都将出现在.mydiv div之后。 我有一种强烈的感觉,这不是你想要的。
如果你想一个接一个地创建它们,你有不同的选择,比如这个(繁琐) each() :
var content = d3.select("body"); var data = [{ title: "foo" }, { title: "bar" }]; var divs = content.selectAll(null) .data(data) .enter(); divs.each(function(d) { content.append("div") .attr('class', 'mydiv') .append('h4') .text(() => { return d.title }); content.append('div') .attr("class", "new-div"); })<script src="https://d3js.org/d3.v4.min.js"></script>这将创建以下结构:
<div class='mydiv'> <h4>Title</h4> </div> <div class='new-div'></div> <div class='mydiv'> <h4>Title</h4> </div> <div class='new-div'></div>Just to let you know, the accepted answer (at the time of writing) creates this structure:
<div class='mydiv'> <h4>Title</h4> </div> <div class='mydiv'> <h4>Title</h4> </div> <div class='new-div'></div> <div class='new-div'></div>As you can see, all the divs with the class "new-div" will come after the .mydiv divs. I have a strong feeling that this is not what you want.
If you want to create them one after the other, you have different options, like this (cumbersome) each():
var content = d3.select("body"); var data = [{ title: "foo" }, { title: "bar" }]; var divs = content.selectAll(null) .data(data) .enter(); divs.each(function(d) { content.append("div") .attr('class', 'mydiv') .append('h4') .text(() => { return d.title }); content.append('div') .attr("class", "new-div"); })<script src="https://d3js.org/d3.v4.min.js"></script>This will create the following structure:
<div class='mydiv'> <h4>Title</h4> </div> <div class='new-div'></div> <div class='mydiv'> <h4>Title</h4> </div> <div class='new-div'></div>
更多推荐
发布评论