D3.js prepend (jQuery prepend와 유사)

D3.js prepend (jQuery prepend와 유사)

---

나는 D3에서 append의 사용법을 좋아하고 prepend를 찾고 있습니다.

D3에 존재합니까?

---

당신이 사용할 수있는

selection.insert(newElement[, anotherExistingElement])

예를 들면 :

selection.insert("div",":first-child")

위의 코드는 div선택한 요소의 첫 번째 자식 앞에 를 삽입합니다 . 자세한 내용은 설명서 를 확인하십시오 .

노드 앞에 요소를 삽입하는 또 다른 방법 (일반 텍스트 포함) :

var parentEl = d3.select("div").node();
parentEl.insertBefore(document.createElement("div"), parentEl.childNodes[0]);

<script src="https://d3js.org/d3.v3.min.js"></script>
<div>
  This is a plain text
  <a></a>
</div>

---

Selection.lower ()

selection.lower() 요소를 부모의 첫 번째 자식으로 배치합니다.

함께 D3의로 APPEND , selection.append().lower()jQuery의 복제 할 수 앞에 추가를

D3 v4 +부터 D3에는 selection.raise()및 selection.lower()메서드 가 모두 있습니다. DOM에서 SVG 요소의 순서가 그리기 순서를 결정하는 특정 요소가 다른 요소보다 위에 나타나도록 SVG에서 요소를 이동하는 데 가장 자주 사용됩니다. 그러나 DOM의 모든 요소에 사용할 수 있습니다.

다음은 div와 단락을 사용한 간단한 데모입니다.

var div = d3.select("div");

div
  .append("p")
  .text("Inserted")
  .lower();

console.log(div.html());

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="div">
Text
<p> Child Paragraph </p>
</div>

스 니펫은 다음 내용을 포함하는 div를 사용합니다.

Text
<p> Child Paragraph </p>

그리고 d3를 사용하여 새 단락을 추가 한 다음 구조가 다음과 같이되도록 낮 춥니 다.

<p>Inserted</p>
Text
<p> Child Paragraph </p>

그리고 jQuery의 prepend와 비교하기 위해 :

var div = $("div");

div
  .prepend("<p>Inserted</p>");

console.log(div.html());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div">
Text
<p> Child Paragraph </p>
</div>

더 많은 정보

selection.lower ()는 다음과 같이 구현됩니다 (자세한 내용은 문서 참조 ).

selection.each(function() {
  this.parentNode.insertBefore(this, this.parentNode.firstChild);
});

참고 URL : https://stackoverflow.com/questions/26234636/d3-js-prepend-similar-to-jquery-prepend