อะไรคือความแตกต่างระหว่าง D3 และ jQuery?

อ้างถึงตัวอย่างนี้:

http://vallandingham.me/stepper_steps.html

ดูเหมือนว่าไลบรารี D3 และ jQuery จะคล้ายกันมากในแง่ที่ว่าทั้งสองทำการจัดการ DOM ด้วยวิธีการผูกมัดวัตถุ

ฉันอยากรู้ว่าฟังก์ชั่นอะไรที่ D3 ทำให้ง่ายกว่า jQuery และในทางกลับกัน มีไลบรารีกราฟและการแสดงภาพจำนวนมากที่ใช้ jQuery เป็นพื้นฐาน (เช่นแผนภูมิสูง, กองเรือ, วิจโม).

โปรดยกตัวอย่างเฉพาะว่าแตกต่างกันอย่างไร

• D3 เป็นที่ขับเคลื่อนด้วยข้อมูลแต่ jQuery ไม่ได้: กับ jQuery คุณโดยตรงจัดการองค์ประกอบ แต่ด้วย D3 คุณให้ข้อมูลและเรียกกลับผ่านที่ไม่ซ้ำกัน D3 ของdata(), enter()และexit()วิธีการและ D3 องค์ประกอบปรุงแต่ง

• โดยปกติ D3 จะใช้สำหรับการแสดงข้อมูล แต่ jQuery ใช้สำหรับสร้างเว็บแอป D3 มีส่วนขยายการแสดงข้อมูลจำนวนมากและ jQuery มีปลั๊กอินเว็บแอปมากมาย

• ทั้งสองเป็นไลบรารีการจัดการ JavaScript DOM มีตัวเลือก CSS และ API ที่คล่องแคล่วและอิงตามมาตรฐานเว็บซึ่งทำให้ดูเหมือนกัน

โค้ดต่อไปนี้เป็นตัวอย่างการใช้งาน D3 ซึ่งใช้กับ jQuery ไม่ได้ (ลองดูใน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 หากคุณต้องการอะไรเล็ก ๆ น้อย ๆ ให้พิจารณาขีดล่าง js หากคุณต้องการบางสิ่งบางอย่างด้วยการฉีดแบบพึ่งพาและการทดสอบให้พิจารณา AngularJS

เปรียบเทียบทั่วไปคู่มือจากวิกิพีเดีย

ฉันเห็นว่าทำไมบางคนถึงคิดว่าพวกเขาคล้ายกัน พวกเขาใช้ไวยากรณ์ตัวเลือกที่คล้ายกัน - $ ('SELECTOR') และ d3 เป็นเครื่องมือที่มีประสิทธิภาพมากสำหรับการเลือกกรองและดำเนินการกับองค์ประกอบ html โดยเฉพาะอย่างยิ่งในขณะที่ผูกการดำเนินการเหล่านี้เข้าด้วยกัน d3 พยายามที่จะอธิบายเรื่องนี้กับคุณในหน้าแรกของตนโดยอ้างว่าเป็นห้องสมุดวัตถุประสงค์ทั่วไป แต่ความจริงก็คือคนส่วนใหญ่ใช้มันเมื่อพวกเขาต้องการที่จะทำให้กราฟ มันค่อนข้างแปลกที่จะใช้มันสำหรับการจัดการ Dom โดยเฉลี่ยของคุณเนื่องจากเส้นโค้งการเรียนรู้ d3 นั้นสูงชันมาก อย่างไรก็ตามเป็นเครื่องมือทั่วไปมากกว่า jQuery และโดยทั่วไปผู้คนสร้างไลบรารีเฉพาะอื่น ๆ (เช่น nvd3) ไว้ด้านบนของ d3 แทนที่จะใช้โดยตรง

คำตอบของ @ 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 คุณจะผูกข้อมูลกับโหนดโดม เนื่องจาก SVG เราสามารถสร้างกราฟได้ แต่ D3 มีมากกว่านั้นมาก คุณสามารถแทนที่กรอบเช่น Backbone, Angular และ Ember โดยใช้ D3

ไม่แน่ใจว่าใครโหวตลงบ้าง แต่ขอฉันเพิ่มความชัดเจนให้มากขึ้น

เว็บไซต์จำนวนมากขอข้อมูลจากเซิร์ฟเวอร์ซึ่งมักมาจากฐานข้อมูล เมื่อเว็บไซต์ได้รับข้อมูลนี้เราต้องทำการอัปเดตหน้าของเนื้อหาใหม่ เฟรมเวิร์กจำนวนมากทำเช่นนี้และ d3 ก็ทำเช่นนี้เช่นกัน ดังนั้นแทนที่จะใช้องค์ประกอบ svg คุณสามารถใช้องค์ประกอบ html แทนได้ เมื่อคุณเรียกการวาดใหม่มันจะอัปเดตหน้าด้วยเนื้อหาใหม่อย่างรวดเร็ว เป็นเรื่องดีจริงๆที่ไม่มีค่าใช้จ่ายพิเศษทั้งหมดเช่น jquery, backbone + plugins, angular ฯลฯ คุณจำเป็นต้องรู้ d3 เท่านั้น ตอนนี้ d3 ไม่มีระบบการกำหนดเส้นทางเข้ามา แต่คุณสามารถหาได้เสมอ

ในทางกลับกัน Jquery จุดประสงค์เดียวคือการเขียนโค้ดให้น้อยลง เป็นเพียงจาวาสคริปต์สั้น ๆ ที่ได้รับการทดสอบบนเบราว์เซอร์จำนวนมาก หากคุณไม่มี jquery บนหน้าเว็บของคุณมากนัก เป็นห้องสมุดที่น่าใช้ เป็นเรื่องง่ายและใช้ความเจ็บปวดอย่างมากจากการพัฒนาจาวาสคริปต์สำหรับเบราว์เซอร์หลายตัว

หากคุณพยายามใช้ jquery ในรูปแบบ d3 มันจะค่อนข้างช้าเนื่องจากไม่ได้ออกแบบมาสำหรับงานนั้นเช่นเดียวกัน d3 ไม่ได้ออกแบบมาเพื่อโพสต์ข้อมูลไปยังเซิร์ฟเวอร์มันออกแบบมาเพื่อใช้และแสดงผลข้อมูลเท่านั้น .

d3 สร้างขึ้นเพื่อการแสดงข้อมูลโดยการกรองผ่านวัตถุ DOM และใช้การแปลง

jQuery สร้างขึ้นเพื่อการจัดการ DOM และทำให้ชีวิตง่ายขึ้นสำหรับงาน JS พื้นฐานหลายอย่าง

หากคุณต้องการเปลี่ยนข้อมูลให้เป็นรูปภาพแบบโต้ตอบที่สวยงาม D3 นั้นยอดเยี่ยมมาก

หากคุณต้องการย้ายจัดการหรือปรับเปลี่ยนหน้าเว็บของคุณ jQuery คือเครื่องมือของคุณ

คำถามดีมาก!

แม้ว่าไลบรารีทั้งสองจะแชร์คุณสมบัติเดียวกันหลายอย่าง แต่สำหรับฉันแล้วความแตกต่างที่ยิ่งใหญ่ที่สุดระหว่าง jQuery และ D3 คือโฟกัส

jQuery เป็นไลบรารีสำหรับวัตถุประสงค์ทั่วไปที่เน้นการใช้งานข้ามเบราว์เซอร์และใช้งานง่าย

D3 มุ่งเน้นไปที่ข้อมูล (การจัดการและการแสดงภาพ) และรองรับเฉพาะเบราว์เซอร์ที่ทันสมัย และแม้ว่ามันจะดูเหมือน jQuery แต่ก็ใช้งานได้ยากกว่ามาก

ทั้งสองอย่างสามารถแก้จุดประสงค์เดียวกันในการสร้างและจัดการ DOM (ไม่ว่าจะเป็น HTML หรือ SVG) D3 แสดง API ที่ช่วยลดความซับซ้อนของงานทั่วไปที่คุณต้องทำเมื่อสร้าง / จัดการ DOM ตามข้อมูล ทำสิ่งนี้ผ่านการสนับสนุนดั้งเดิมสำหรับการผูกข้อมูลผ่านฟังก์ชัน data () ใน jQuery คุณจะต้องประมวลผลข้อมูลด้วยตนเองและกำหนดวิธีการเชื่อมโยงกับข้อมูลเพื่อสร้าง DOM ด้วยเหตุนี้โค้ดของคุณจึงมีขั้นตอนมากขึ้นและหาเหตุผลและปฏิบัติตามได้ยากขึ้น ด้วย D3 ขั้นตอน / รหัสน้อยลงและมีการเปิดเผยมากขึ้น D3 ยังมีฟังก์ชันระดับสูงกว่าที่ช่วยในการสร้างภาพข้อมูลใน SVG ฟังก์ชันต่างๆเช่น range (), domain () และ scale () ทำให้ง่ายต่อการใช้ข้อมูลและพล็อตบนกราฟ ฟังก์ชั่นเช่นแกน () ยังทำให้ง่ายต่อการวาดองค์ประกอบ UI ทั่วไปที่คุณคาดหวังในแผนภูมิ / กราฟ