คำถามติดแท็ก d3.js

D3.js เป็นไลบรารี JavaScript สำหรับการสร้างภาพแสดงข้อมูลแบบโต้ตอบของเอกสารโดยใช้ HTML, SVG และ Canvas

6
จะเพิ่มคำแนะนำเครื่องมือลงในกราฟิก svg ได้อย่างไร?
ฉันมีชุดสี่เหลี่ยม svg (โดยใช้ D3.js) และฉันต้องการแสดงข้อความเมื่อวางเมาส์เหนือข้อความควรล้อมรอบด้วยกล่องที่ทำหน้าที่เป็นพื้นหลัง ทั้งสองควรจัดวางให้ชิดกันอย่างสมบูรณ์และเป็นรูปสี่เหลี่ยมผืนผ้า (ด้านบนและตรงกลาง) วิธีที่ดีที่สุดในการทำคืออะไร? ฉันลองเพิ่มข้อความ svg โดยใช้แอตทริบิวต์ "x", "y", "width" และ "height" จากนั้นป้อน svg rect ไว้ล่วงหน้า ปัญหาคือจุดอ้างอิงของข้อความอยู่ตรงกลาง (เนื่องจากฉันต้องการจัดแนวกึ่งกลางที่ฉันใช้text-anchor: middle) แต่สำหรับสี่เหลี่ยมผืนผ้านั้นเป็นพิกัดด้านซ้ายบนและฉันต้องการระยะขอบเล็กน้อยรอบ ๆ ข้อความซึ่งทำให้เป็นแบบ ความเจ็บปวด. อีกทางเลือกหนึ่งคือการใช้ html div ซึ่งน่าจะดีเพราะฉันสามารถเพิ่มข้อความและช่องว่างภายในได้โดยตรง แต่ฉันไม่รู้วิธีรับพิกัดสัมบูรณ์สำหรับแต่ละสี่เหลี่ยมผืนผ้า มีวิธีทำไหม?
3
ความแตกต่างระหว่าง GeoJSON และ TopoJSON
GeoJSON และ TopoJSON แตกต่างกันอย่างไรและเมื่อใดที่ฉันจะใช้อันอื่น รายละเอียดของ TopoJSON บน GitHubหมายถึงไฟล์ TopoJSON มีขนาดเล็ก 80% แล้วทำไมไม่ใช้ TopoJSON ตลอดเวลาล่ะ?
91 d3.js  gis  geojson  topojson 
1
การเพิ่มโหนดใหม่ในรูปแบบบังคับทิศทาง
คำถามแรกเกี่ยวกับ Stack Overflow ดังนั้นอดทนกับฉัน! ฉันยังใหม่กับ d3.js แต่รู้สึกประหลาดใจอย่างต่อเนื่องกับสิ่งที่คนอื่นทำได้ ... และแทบจะประหลาดใจกับความก้าวหน้าเพียงเล็กน้อยที่ฉันสามารถทำได้ด้วยตัวเอง! เห็นได้ชัดว่าฉันไม่ได้เอะอะอะไรบางอย่างดังนั้นฉันหวังว่าวิญญาณใจดีที่นี่จะแสดงแสงสว่างให้ฉันเห็น ความตั้งใจของฉันคือการสร้างฟังก์ชันจาวาสคริปต์ที่ใช้ซ้ำได้ซึ่งทำสิ่งต่อไปนี้: สร้างกราฟบังคับทิศทางเปล่าในองค์ประกอบ DOM ที่ระบุ ช่วยให้คุณสามารถเพิ่มและลบโหนดที่มีป้ายกำกับและแสดงภาพลงในกราฟนั้นโดยระบุการเชื่อมต่อระหว่างโหนดเหล่านั้น ฉันได้ใช้http://bl.ocks.org/950642เป็นจุดเริ่มต้นเนื่องจากเป็นรูปแบบที่ฉันต้องการสร้าง: นี่คือลักษณะของรหัสของฉัน: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="underscore-min.js"></script> <script type="text/javascript" src="d3.v2.min.js"></script> <style type="text/css"> .link { stroke: #ccc; } .nodetext { pointer-events: none; font: 10px sans-serif; } body { width:100%; height:100%; margin:none; …
4
การเปรียบเทียบระหว่าง d3.js และ chart.js (สำหรับแผนภูมิเท่านั้น) [ปิด]
ปิด . คำถามนี้จะต้องมีมากขึ้นมุ่งเน้น ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เน้นไปที่ปัญหาเดียวโดยแก้ไขโพสต์นี้เท่านั้น ปิด2 เดือนที่แล้ว . ปรับปรุงคำถามนี้ ฉันใช้ chart.js ในโปรเจ็กต์ของฉันหลายครั้ง แต่ฉันไม่เคยใช้ d3.js หลายคนบอกว่า d3.js เป็นเฟรมเวิร์กจาวาสคริปต์ที่ดีที่สุดสำหรับแผนภูมิ แต่ไม่มีใครสามารถอธิบายได้ว่าทำไมโดยเฉพาะเมื่อฉันต้องการเปรียบเทียบกับ chart.js ฉันได้พบสิ่งนี้: http://www.fusioncharts.com/javascript-charting-comparison/ แต่ไม่ใช่สิ่งที่ฉันกำลังมองหา มีใครทราบเกี่ยวกับการเปรียบเทียบกรอบการทำงานเหล่านี้ในแง่ของการใช้งานและประสิทธิภาพ (สำหรับแผนภูมิเท่านั้น)
5
ฉันจะลบองค์ประกอบลูกทั้งหมดออกจากโหนดแล้วใช้อีกครั้งด้วยสีและขนาดที่ต่างกันได้อย่างไร
ดังนั้นฉันจึงมีโค้ดกราฟเค้าโครงบังคับถัดไปสำหรับการตั้งค่าโหนดลิงก์และองค์ประกอบอื่น ๆ : var setLinks = function () { link = visualRoot.selectAll("line.link") .data(graphData.links) .enter().append("svg:line") .attr("class", "link") .style("stroke-width", function (d) { return nodeStrokeColorDefault; }) .style("stroke", function (d) { return fill(d); }) .attr("x1", function (d) { return d.source.x; }) .attr("y1", function (d) { return d.source.y; }) .attr("x2", function (d) { return d.target.x; …
3
Protovis กับ D3.js
TLDR: ใครมีประสบการณ์ของทั้ง protovis และ D3.js เพื่อชี้ให้เห็นความแตกต่างระหว่างทั้งสอง? ฉันเล่นกับโปรโตวิสในช่วง 2 สัปดาห์ที่ผ่านมาและมันก็ยอดเยี่ยมมาก ยกเว้นตอนนี้ดูเหมือนว่าฉันจะชนกำแพงอิฐด้วยภาพเคลื่อนไหว โปรโตวิส: http://vis.stanford.edu/protovis/ ฉันต้องการทำแอนิเมชันที่ค่อนข้างเรียบง่าย แต่ด้วยโปรโตวิสมันให้ความรู้สึกน้อยกว่าที่ใช้งานง่าย - ฉันเริ่มคิดว่าโปรโตวิสไม่เคยมีความหมายสำหรับแอนิเมชั่นจริงๆ ดังนั้นฉันจึงเริ่มดู D3.js: http://mbostock.github.com/d3/ex/stack.html ดูเหมือนกันมาก แต่: ดูเหมือนจะมีน้ำหนักเบากว่า ดูเหมือนว่าจะมีการโต้ตอบกับองค์ประกอบ DOM อื่น ๆ เช่นเดียวกับ SVG ดูเหมือนว่าจะเพิ่มภาพเคลื่อนไหว ใครสามารถชี้ให้เห็นความแตกต่างอื่น ๆ ? ฉันจะขอบคุณมากสำหรับข้อมูลใด ๆ และทั้งหมด
8
มีวิธีแปลงคอลัมน์ CSV เป็นความสัมพันธ์แบบลำดับชั้นหรือไม่
ฉันมีบันทึกความหลากหลายทางชีวภาพ 7 ล้าน csv ซึ่งระดับอนุกรมวิธานเป็นคอลัมน์ ตัวอย่างเช่น RecordID,kingdom,phylum,class,order,family,genus,species 1,Animalia,Chordata,Mammalia,Primates,Hominidae,Homo,Homo sapiens 2,Animalia,Chordata,Mammalia,Carnivora,Canidae,Canis,Canis 3,Plantae,nan,Magnoliopsida,Brassicales,Brassicaceae,Arabidopsis,Arabidopsis thaliana 4,Plantae,nan,Magnoliopsida,Fabales,Fabaceae,Phaseoulus,Phaseolus vulgaris ฉันต้องการสร้างการสร้างภาพข้อมูลใน D3 แต่รูปแบบข้อมูลจะต้องเป็นเครือข่ายโดยที่แต่ละคอลัมน์มีค่าต่างกันเป็นลูกของคอลัมน์ก่อนหน้าสำหรับค่าที่แน่นอน ฉันต้องเปลี่ยนจาก csv เป็นอย่างนี้: { name: 'Animalia', children: [{ name: 'Chordata', children: [{ name: 'Mammalia', children: [{ name: 'Primates', children: 'Hominidae' }, { name: 'Carnivora', children: 'Canidae' }] }] }] } ฉันไม่ได้คิดเกี่ยวกับวิธีการทำสิ่งนี้โดยไม่ใช้ลูปเป็นพัน ไม่มีใครมีข้อเสนอแนะเกี่ยวกับวิธีการสร้างเครือข่ายนี้ในหลามหรือจาวาสคริปต์?
1
การสร้างแผนที่ D3 ของข้อมูลซองจดหมายวงรี
ฉันมีชุดข้อมูลนี้ซึ่งมีรูปวงรี "ซองจดหมาย" ที่เฉพาะเจาะจงยิ่งขึ้น ฉันสงสัยว่ามีใครบางคนมีคำแนะนำเกี่ยวกับวิธีการวาดเหล่านี้บนแผนที่ D3 ฉันมีการตั้งค่าแผนที่พร้อมฉายภาพ Mercator แล้ว คำตอบแบบสแต็คโอเวอร์โฟลว์นี้มีฟังก์ชั่น createEllipseซึ่งทำให้ฉันเข้าใกล้ แต่ฉันต้องการตรวจสอบให้แน่ใจว่าฉันกำลังตีความข้อมูลอย่างถูกต้อง ฉันเสียบค่าแกนหลัก / รองของวงรีจากข้อมูลและใช้ azimuth สำหรับการหมุนนี่จะถูกต้องหรือไม่ ฉันไม่เข้าใจส่วน "ซองจดหมาย" ด้วย หลายจุดในแต่ละโซนจะสร้างรูปร่างที่ต่อเนื่องกันได้อย่างไร คำแนะนำใด ๆ ที่จะได้รับการชื่นชม. const margin = {top:0, right:0, bottom:0, left:0}, width = 1000 - margin.left - margin.right, height = 800 - margin.top - margin.bottom; const svg = d3.select('body') .append('svg') .attr('width', …
3
d3 การซิงโครไนซ์ 2 พฤติกรรมการซูมแยกต่างหาก
ฉันมีแผนภูมิ d3 / d3fc ต่อไปนี้ https://codepen.io/parliament718/pen/BaNQPXx แผนภูมิมีพฤติกรรมการซูมสำหรับพื้นที่หลักและพฤติกรรมการซูมแยกต่างหากสำหรับแกน y คุณสามารถลากแกน y ไปยัง rescale ได้ ปัญหาที่ฉันมีปัญหาในการแก้ปัญหาคือหลังจากลากแกน y ไปยัง rescale แล้วจึงปรากฎว่ามีแผนภูมิ "กระโดด" ในแผนภูมิ เห็นได้ชัดว่าพฤติกรรมการซูม 2 รายการมีการยกเลิกการเชื่อมต่อและจำเป็นต้องซิงโครไนซ์ แต่ฉันพยายามที่จะแก้ไขปัญหานี้ const mainZoom = zoom() .on('zoom', () => { xScale.domain(t.rescaleX(x2).domain()); yScale.domain(t.rescaleY(y2).domain()); }); const yAxisZoom = zoom() .on('zoom', () => { const t = event.transform; yScale.domain(t.rescaleY(y2).domain()); render(); }); …
11 d3.js  d3fc 
1
Uncaught TypeError: t.rgb ไม่ใช่ฟังก์ชั่น
Uncaught TypeError: t.rgb ไม่ใช่ฟังก์ชั่น ฉันสร้างแอปพลิเคชันเชิงมุมสร้างขึ้นและพยายามให้บริการ $ ng serve --prod --aot ซึ่งส่งผลให้เกิดข้อผิดพลาดต่อไปนี้ในคอนโซล Uncaught TypeError: t.rgb is not a function at HO (color.js.pre-build-optimizer.js:227) at GO (color.js.pre-build-optimizer.js:232) at rgb.js.pre-build-optimizer.js:36 at RH (ramp.js.pre-build-optimizer.js:4) at Module.zUnb (BrBG.js.pre-build-optimizer.js:16) at f (bootstrap:78) at Object.0 (index.js.pre-build-optimizer.js:26) at f (bootstrap:78) at t (bootstrap:45) at Array.r [as push] (bootstrap:32) แอปพลิเคชันไม่แสดง …
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.