D3와 jQuery의 차이점은 무엇입니까?

D3와 jQuery의 차이점은 무엇입니까?

이 예를 참조하십시오.

http://vallandingham.me/stepper_steps.html

D3와 jQuery 라이브러리는 둘 다 객체 체인 방식으로 DOM 조작을 한다는 점에서 매우 유사한 것으로 보입니다.

저는 JQuery보다 D3가 어떤 기능을 더 쉽게 만들 수 있는지 궁금합니다.jQuery를 기본으로 사용하는 많은 그래프 및 시각화 라이브러리(예: high chart, flot, wijmo)가 있습니다.

그들이 어떻게 다른지 구체적인 예를 들어주세요.

• D3는 데이터 중심이지만 jQuery는 그렇지 않습니다. jQuery는 요소를 직접 조작하지만 D3는 D3의 고유한 기능을 통해 데이터와 콜백을 제공합니다.data(),enter()그리고.exit()메소드와 D3는 요소를 조작합니다.

• D3는 일반적으로 데이터 시각화에 사용되지만 jQuery는 웹 앱을 만드는 데 사용됩니다.D3에는 많은 데이터 시각화 확장이 있고 jQuery에는 많은 웹 앱 플러그인이 있습니다.

• 둘 다 JavaScript DOM 조작 라이브러리이며 CSS 셀렉터와 유창한 API를 가지고 있으며 웹 표준을 기반으로 유사하게 보입니다.

다음 코드는 jQuery에서는 불가능한 D3 사용 예입니다(jsfidfidle에서 사용해 보십시오).

  // create selection
  var selection = d3.select('body').selectAll('div');

  // create binding between selection and data
  var binding = selection.data([50, 100, 150]);

  // update existing nodes
  binding
    .style('width', function(d) { return d + 'px'; });

  // create nodes for new data
  binding.enter()
    .append('div')
    .style('width', function(d) { return d + 'px'; });

  // remove nodes for discarded data
  binding.exit()
    .remove();

d3는 바보 같은 설명을 가지고 있습니다.jQuery와 d3는 전혀 유사하지 않고, 같은 용도로 사용하지 않습니다.

jQuery의 목적은 일반적인 돔 조작을 하는 것입니다.이것은 당신이 하고 싶은 모든 것을 위한 범용 자바스크립트 툴킷입니다.

d3는 주로 데이터로 빛나는 그래프를 쉽게 만들 수 있도록 설계되었습니다.데이터를 그래픽으로 시각화하려면 반드시 사용해야 합니다(또는 유사한 것 또는 그 위에 빌드된 것).

대화형 양식의 모든 요구사항을 충족하기 위해 범용 JS 라이브러리를 사용하려면 jQuery 또는 protoormootools를 고려하십시오.작은 것을 원한다면 언더스코어.js를 고려하세요.종속성 주입 및 검정 가능성이 있는 것을 원하는 경우 각도를 고려합니다.제이에스

위키피디아의 일반 비교 가이드.

나는 왜 누군가가 그들이 비슷하다고 생각하는지 알겠어요.이들은 유사한 선택기 구문을 사용합니다. $('SELECTOR'). d3는 HTML 요소를 선택, 필터링 및 작동하기 위한 매우 강력한 도구이며, 특히 이러한 작업을 함께 연결합니다. d3는 범용 라이브러리라고 주장하여 홈 페이지에서 이를 설명하려고 합니다.하지만 사실은 대부분의 사람들이 그래프를 만들고 싶을 때 그것을 사용한다는 것입니다.d3 학습 곡선이 너무 가파르기 때문에 평균 돔 조작에 사용하는 것은 매우 이례적입니다.그러나 jQuery보다 훨씬 일반적인 도구이며, 일반적으로 사람들은 직접 사용하는 대신 d3 위에 다른 더 구체적인 라이브러리(예: nvd3)를 만듭니다.

@JohnS의 답변 또한 매우 좋습니다.유창한 API = 메서드 체인입니다.저는 또한 플러그인과 확장이 도서관을 어디로 이끌 것인지에 대해서도 동의합니다.

저는 최근에 둘 다 조금씩 사용하고 있습니다.d3는 Sizzle의 실렉터를 사용하기 때문에 실렉터를 거의 혼합할 수 있습니다.

d3.select('#mydiv')는 jQuery('#mydiv')와 완전히 동일하게 반환되지 않습니다.동일한 DOM 요소이지만 다른 생성자로 인스턴스화되고 있습니다.예를 들어 다음과 같은 요소가 있다고 가정합니다.

<div id="mydiv" rel="awesome div" data-hash="654687867asaj"/>

몇 가지 일반적인 방법을 살펴보겠습니다.

> d3.select('#mydiv').attr('rel') ;
 "awesome div"

> jQuery('#mydiv').attr('rel');
 "awesome div"

합법적으로 보입니다.하지만 조금만 더 나아가면,

> d3.select('#mydiv').data();
 [undefined]

> jQuery('#mydiv').data();
 Object {hash: "654687867asaj"}

D3는 단지 시각적 그래프에 관한 것이 아닙니다.데이터 기반 문서.d3를 사용할 때 데이터를 돔 노드에 바인딩합니다.SVG 덕분에 그래프를 만들 수 있지만 D3는 훨씬 더 많습니다.Backbone, Angular 및 Ember와 같은 프레임워크를 D3를 사용하여 대체할 수 있습니다.

누가 반대표를 던졌는지는 확실하지 않지만, 좀 더 명확하게 말씀드리겠습니다.

대부분의 웹 사이트는 서버에서 데이터를 요청하며, 이 데이터는 일반적으로 데이터베이스에서 가져옵니다.웹사이트가 이 데이터를 받으면, 우리는 새로운 콘텐츠의 페이지 업데이트를 해야 합니다.많은 프레임워크가 이를 수행하며, d3도 이를 수행합니다.따라서 svg 요소를 사용하는 대신 html 요소를 사용할 수 있습니다.다시 그리기를 호출하면 페이지가 새 내용으로 빠르게 업데이트됩니다.jquery, backbone + 플러그인, 각진 등과 같은 여분의 오버헤드가 없는 것은 정말 좋은 일입니다.당신은 d3만 알면 됩니다.이제 d3에는 라우팅 시스템이 없습니다.하지만 당신은 항상 찾을 수 있습니다.

반면에 Jquery, 그것의 유일한 목적은 코드를 적게 쓰는 것입니다.이것은 많은 브라우저에서 테스트된 자바스크립트의 간단한 버전입니다.웹 페이지에 jquery가 많지 않은 경우.그것은 사용하기에 좋은 도서관입니다.이것은 간단하고 여러 브라우저의 자바스크립트 개발에 많은 어려움을 겪습니다.

만약 당신이 jquery를 d3와 같은 방식으로 구현하려고 한다면, 그것은 매우 느릴 것입니다. 왜냐하면 그것은 그 작업을 위해 설계된 것이 아니기 때문입니다. 마찬가지로 d3는 데이터를 서버에 게시하기 위한 것이 아니라 단지 데이터를 소비하고 렌더링하기 위해 설계된 것입니다.

d3는 데이터 시각화를 위해 만들어졌으며, DOM 객체를 통해 필터링하고 변환을 적용하여 이를 수행합니다.

jQuery는 DOM 조작과 많은 기본적인 JS 작업을 쉽게 하기 위해 만들어졌습니다.

만약 당신이 데이터를 예쁘고 상호작용적인 사진으로 바꾸려고 한다면, D3는 정말 멋집니다.

웹 페이지를 이동, 조작 또는 수정하려는 경우 jQuery가 도구입니다.

좋은 질문입니다!

두 라이브러리 모두 많은 동일한 기능을 공유하지만, 제가 보기에 jQuery와 D3의 가장 큰 차이점은 초점입니다.

jQuery는 크로스 브라우저 및 사용 편의성에 중점을 둔 범용 라이브러리입니다.

D3는 데이터(조작 및 시각화)에 중점을 두고 있으며 최신 브라우저만 지원합니다.jQuery처럼 보이지만 사용하기가 훨씬 어렵습니다.

두 가지 모두 DOM을 만들고 조작하는 동일한 목적(HTML 또는 SVG)을 해결할 수 있습니다.D3는 데이터를 기반으로 DOM을 생성/조작할 때 수행할 일반적인 작업을 단순화하는 API를 제공합니다.데이터() 함수를 통해 데이터 바인딩을 기본적으로 지원하므로 이를 수행할 수 있습니다.jQuery에서는 DOM을 생성하기 위해 데이터를 수동으로 처리하고 데이터에 바인딩하는 방법을 정의해야 합니다.이로 인해 코드는 절차적으로 진행되고 추론하고 따르기가 어려워집니다.D3를 사용하면 단계/코드가 적고 선언적입니다.또한 D3는 SVG에서 데이터 시각화를 생성하는 데 도움이 되는 몇 가지 더 높은 수준의 기능을 제공합니다.range(), domain() 및 scale()과 같은 기능을 사용하면 데이터를 더 쉽게 가져와서 그래프에 표시할 수 있습니다.축()과 같은 기능을 사용하면 차트/그래프에 예상되는 공통 UI 요소를 더 쉽게 그릴 수 있습니다.대화형 동작 및 애니메이션을 포함한 데이터의 보다 복잡한 시각화를 지원하기 위해 D3 위에 배치되는 다른 더 높은 수준의 API 라이브러리가 많이 있습니다.

언급URL : https://stackoverflow.com/questions/13187112/what-is-the-difference-between-d3-and-jquery