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

Program / 글쓴이

이 예를 참조하십시오.

http://vallandingham.me/stepper_steps.html

D3 및 jQuery 라이브러리는 둘 다 객체 체인 방식으로 DOM 조작을 수행한다는 점에서 매우 유사합니다.

D3가 jQuery보다 쉽게 ​​만드는 기능과 그 반대의 기능을 알고 싶습니다. jQuery를 기반으로 사용하는 그래프 및 시각화 라이브러리가 많이 있습니다 (예 :하이 차트, 부유물, Wijmo).

그들이 어떻게 다른지에 대한 구체적인 예를 제공하십시오.

답변

  • D3는 데이터 기반 하지만, jQuery를이되지 않습니다 : jQuery를 함께 직접 조작 요소를하지만, D3와 함께 당신은 데이터와 콜백 제공 D3의 독특한 통해 data(), enter()그리고 exit()방법과 D3이 조작 요소를.

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

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

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

  // 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의 목적은 일반적인 DOM 조작을 수행하는 것입니다. 당신이 원하는 모든 것을위한 범용 자바 스크립트 툴킷입니다.

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

모든 대화 형 양식 요구에 맞는 범용 JS 라이브러리를 원한다면 jQuery 또는 proto 또는 mootools를 고려하십시오. 작은 것을 원한다면 underscore.js를 고려하십시오. 의존성 주입 및 테스트 가능성을 원하는 경우 AngularJS를 고려하십시오.

일반 비교위키 백과 가이드.

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

@JohnS의 답변도 매우 좋습니다. Fluent 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를 사용하면 데이터를 dom 노드에 바인딩합니다. SVG 덕분에 그래프를 만들 수 있지만 D3는 훨씬 더 많습니다. Backbone, Angular 및 Ember와 같은 프레임 워크를 D3를 사용하여 대체 할 수 있습니다.

누가 아래로 투표했는지 확실하지 않지만 좀 더 명확하게 추가하겠습니다.

많은 웹 사이트가 일반적으로 데이터베이스에서 제공되는 서버에서 데이터를 요청합니다. 웹 사이트가이 데이터를 수신하면 새 콘텐츠의 페이지 업데이트를 수행해야합니다. 많은 프레임 워크가이를 수행하며 d3도이를 수행합니다. 따라서 svg 요소를 사용하는 대신 html 요소를 대신 사용할 수 있습니다. 다시 그리기를 호출하면 새 콘텐츠로 페이지가 빠르게 업데이트됩니다. jquery, backbone + 그 플러그인, angular 등과 같은 모든 추가 오버 헤드를 갖지 않는 것이 정말 좋습니다. d3 만 알면됩니다. 이제 d3에는 라우팅 시스템이 포함되어 있지 않습니다. 하지만 언제든지 찾을 수 있습니다.

반면에 Jquery는 코드를 적게 작성하는 것이 유일한 목적입니다. 많은 브라우저에서 테스트 된 자바 스크립트의 짧은 버전입니다. 웹 페이지에 jquery가 많지 않은 경우. 사용하기 좋은 라이브러리입니다. 간단하고 여러 브라우저를위한 자바 스크립트 개발에서 많은 수고를 덜어줍니다.

d3와 같은 방식으로 jquery를 구현하려고 시도하면 해당 작업을 위해 설계되지 않았기 때문에 매우 느릴 것입니다. 마찬가지로 d3는 데이터를 서버에 게시하도록 설계되지 않았으며 데이터를 소비하고 렌더링하도록 설계되었습니다. .

답변

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

jQuery는 DOM 조작을 위해 만들어졌으며 많은 기본 JS 작업을 더 쉽게 만듭니다.

데이터를 예쁘고 인터랙티브 한 그림으로 바꾸려는 경우 D3는 대단합니다.

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

답변

좋은 질문입니다!

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

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

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

답변

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