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

สมมติว่าฉันมีสคริปต์ฮิสโตแกรมที่สร้างกราฟิก 960 500 svg ฉันจะทำให้การตอบสนองนี้ปรับขนาดความกว้างและความสูงของกราฟิกเป็นแบบไดนามิกได้อย่างไร <script> var n = 10000, // number of trials m = 10, // number of random variables data = []; // Generate an Irwin-Hall distribution. for (var i = 0; i < n; i++) { for (var s = 0, j = 0; j < …

224 javascript  responsive-design  d3.js 

ฉันมีรหัส JavaScript ซึ่งสร้าง (โดยใช้ D3.js) svgองค์ประกอบที่มีแผนภูมิ ฉันต้องการอัปเดตแผนภูมิตามข้อมูลใหม่ที่มาจากบริการบนเว็บโดยใช้ AJAX ปัญหาคือทุกครั้งที่ฉันคลิกที่ปุ่มอัปเดตจะสร้างใหม่svgดังนั้นฉันจึงต้องการลบเก่าหรืออัปเดตเนื้อหา นี่คือตัวอย่างจากฟังก์ชั่น JavaScript ที่ฉันสร้างsvg: var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); ฉันจะลบsvgองค์ประกอบเก่าหรืออย่างน้อยแทนที่เนื้อหาได้อย่างไร

200 javascript  ajax  svg  d3.js 

ใครช่วยอธิบายความแตกต่างระหว่าง datum () และ data () ใน D3.js ได้ไหม? ฉันเห็นทั้งการใช้งานและฉันไม่แน่ใจว่าทำไมคุณควรเลือกอันใดอันหนึ่ง

199 javascript  d3.js 

ฉันกำลังวาด scatterplot ด้วย d3.js. ด้วยความช่วยเหลือของคำถามนี้: รับขนาดของหน้าจอหน้าเว็บปัจจุบันและหน้าต่างเบราว์เซอร์ ฉันใช้คำตอบนี้: var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], x = w.innerWidth || e.clientWidth || g.clientWidth, y = w.innerHeight|| e.clientHeight|| g.clientHeight; ดังนั้นฉันสามารถปรับพล็อตของฉันไปที่หน้าต่างของผู้ใช้ดังนี้ var svg = d3.select("body").append("svg") .attr("width", x) .attr("height", y) .append("g"); ตอนนี้ฉันต้องการสิ่งที่ดูแลการปรับขนาดพล็อตเมื่อผู้ใช้ปรับขนาดหน้าต่าง PS: ฉันไม่ได้ใช้ jQuery ในรหัสของฉัน

183 javascript  d3.js 

ฉันมีชุดข้อมูลที่ฉันวางแผนในการกระจาย เมื่อฉันวางเมาส์บนวงกลมใดวงหนึ่งฉันต้องการให้ป๊อปอัปมีข้อมูล (เช่นค่า x, y อาจจะมากกว่า) นี่คือสิ่งที่ฉันพยายามใช้: vis.selectAll("circle") .data(datafiltered).enter().append("svg:circle") .attr("cx", function(d) { return x(d.x);}) .attr("cy", function(d) {return y(d.y)}) .attr("fill", "red").attr("r", 15) .on("mouseover", function() { d3.select(this).enter().append("text") .text(function(d) {return d.x;}) .attr("x", function(d) {return x(d.x);}) .attr("y", function (d) {return y(d.y);}); }); ฉันสงสัยว่าฉันจะต้องให้ข้อมูลเพิ่มเติมเกี่ยวกับข้อมูลที่จะป้อน?

162 tooltip  mouseover  d3.js 

ขณะนี้อยู่ใน d3 หากคุณมีวัตถุ geoJSON ที่คุณกำลังจะวาดคุณต้องปรับขนาดและแปลเพื่อให้ได้ขนาดที่ต้องการและแปลเพื่อจัดกึ่งกลาง นี่เป็นงานทดลองและข้อผิดพลาดที่น่าเบื่อมากและฉันสงสัยว่าถ้าใครรู้วิธีที่ดีกว่าในการรับค่าเหล่านี้ ตัวอย่างเช่นถ้าฉันมีรหัสนี้ var path, vis, xy; xy = d3.geo.mercator().scale(8500).translate([0, -1200]); path = d3.geo.path().projection(xy); vis = d3.select("#vis").append("svg:svg").attr("width", 960).attr("height", 600); d3.json("../../data/ireland2.geojson", function(json) { return vis.append("svg:g") .attr("class", "tracts") .selectAll("path") .data(json.features).enter() .append("svg:path") .attr("d", path) .attr("fill", "#85C3C0") .attr("stroke", "#222"); }); ฉันจะได้รับนรกได้อย่างไรขนาด. (8500) และ .translate ([0, -1200]) โดยไม่ไปทีละน้อย?

140 d3.js  geojson  topojson 

ฉันเพิ่งD3.jsเริ่มเรียนรู้วันนี้เท่านั้น ฉันดูตัวอย่างโดนัทและพบรหัสนี้ var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); ฉันค้นหาเอกสารแต่ไม่เข้าใจว่า.append("g")กำลังผนวกอะไรอยู่ มันD3เฉพาะเจาะจงหรือไม่ มองหาคำแนะนำที่นี่

129 javascript  d3.js 

ฉันต้องการทราบความกว้างและความสูงที่แน่นอนสำหรับgองค์ประกอบที่กำหนดเองในของฉันSVGเพราะฉันต้องวาดเครื่องหมายการเลือกรอบ ๆ เมื่อผู้ใช้คลิกแล้ว สิ่งที่ฉันเคยเห็นในอินเทอร์เน็ตมีดังนี้: d3.select("myG").style("width"). ปัญหาคือองค์ประกอบจะไม่มีชุดแอตทริบิวต์ความกว้างที่ชัดเจนเสมอไป ตัวอย่างเช่นเมื่อฉันสร้างวงกลมภายในวงกลมgจะมีชุด radious ( r) แทนความกว้าง แม้ว่าฉันจะใช้window.getComputedStyleเมธอดบน a circleมันจะส่งกลับ "อัตโนมัติ" มีวิธีการคำนวณความกว้างของพลที่svgselement ในD3? ขอบคุณ.

120 javascript  d3.js 

ฉันกำลังพยายามเลือกเทคโนโลยีที่เหมาะสมเพื่อใช้ในการอัปเดตโปรเจ็กต์ที่โดยทั่วไปแล้วจะแสดงจุดหลายพันจุดในกราฟที่สามารถซูมได้และสามารถเลื่อนได้ การใช้งานปัจจุบันโดยใช้ Protovis มีประสิทธิภาพต่ำ ตรวจสอบได้ที่นี่: http://www.planethunters.org/classify มีจุดประมาณ 2,000 จุดเมื่อซูมออกจนสุด ลองใช้ที่จับที่ด้านล่างเพื่อซูมเข้าเล็กน้อยแล้วลากเพื่อเลื่อนไปรอบ ๆ คุณจะเห็นว่ามันค่อนข้างขาด ๆ หาย ๆ และการใช้งาน CPU ของคุณอาจสูงถึง 100% ในหนึ่งคอร์เว้นแต่คุณจะมีคอมพิวเตอร์ที่เร็วมาก การเปลี่ยนพื้นที่โฟกัสแต่ละครั้งจะเรียกการวาดใหม่เป็นโปรโตวิสซึ่งค่อนข้างช้าและแย่กว่าเมื่อมีการดึงจุดมากขึ้น ฉันต้องการอัปเดตอินเทอร์เฟซบางอย่างรวมทั้งเปลี่ยนเทคโนโลยีการแสดงภาพที่เป็นพื้นฐานให้ตอบสนองกับภาพเคลื่อนไหวและการโต้ตอบมากขึ้น จากบทความต่อไปนี้ดูเหมือนว่าตัวเลือกจะอยู่ระหว่างไลบรารีที่ใช้ SVG อื่นหรือแบบผ้าใบ http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/ d3.jsซึ่งงอกออกมาจาก Protovis เป็น SVG-based และควรจะเป็นดีกว่าที่การแสดงผลภาพเคลื่อนไหว อย่างไรก็ตามฉันสงสัยว่าจะดีขึ้นมากแค่ไหนและเพดานประสิทธิภาพของมันเป็นอย่างไร สำหรับเหตุผลที่ฉันยังพิจารณายกเครื่องสมบูรณ์มากขึ้นโดยใช้ห้องสมุดผ้าใบ-based เช่นKineticJS อย่างไรก็ตามก่อนที่ฉันจะใช้วิธีใดวิธีหนึ่งมากเกินไปฉันอยากได้ยินจากคนที่ทำเว็บแอปพลิเคชันที่คล้ายกันซึ่งมีข้อมูลจำนวนมากนี้และขอความเห็นจากพวกเขา สิ่งที่สำคัญที่สุดคือประสิทธิภาพโดยเน้นที่ความสะดวกในการเพิ่มคุณสมบัติการโต้ตอบอื่น ๆ และการเขียนโปรแกรมภาพเคลื่อนไหว อาจจะมีไม่เกิน 2,000 จุดในครั้งเดียวโดยมีแถบข้อผิดพลาดเล็ก ๆ ในแต่ละอัน การซูมเข้าออกและการเลื่อนไปมาจะต้องมีความราบรื่น หากไลบรารี SVG ล่าสุดเหมาะสมกับสิ่งนี้บางทีความสะดวกในการใช้ d3 จะมีมากกว่าการตั้งค่าที่เพิ่มขึ้นสำหรับ KineticJS …

114 html  canvas  svg  d3.js  kineticjs 

ใครช่วยแนะนำไลบรารี Python ที่สามารถสร้างภาพกราฟเชิงโต้ตอบได้บ้าง? ฉันต้องการบางอย่างเช่นd3.js เป็นพิเศษแต่สำหรับpythonและควรเป็น 3D ด้วย ฉันได้ดู: NetworkX - ทำเฉพาะพMatplotlibล็อตและดูเหมือนว่าจะเป็น 2D ฉันไม่เห็นการโต้ตอบแบบใดแบบหนึ่งd3.jsเช่นการดึงโหนดไปรอบ ๆ เครื่องมือกราฟ - ทำเฉพาะแปลง 2 มิติและมีกราฟโต้ตอบที่ช้ามาก

110 python  graph  d3.js  graph-tool 

อะไรคือความแตกต่างระหว่างแอตทริบิวต์ x และ dx ของ svg (หรือ y และ dy) เวลาที่เหมาะสมในการใช้แอตทริบิวต์การเลื่อนแกน (dx) เทียบกับแอตทริบิวต์ตำแหน่ง (x) เมื่อใด ตัวอย่างเช่นฉันสังเกตเห็นตัวอย่าง d3 จำนวนมากที่ทำอะไรแบบนี้ chart.append("text") .attr("x", 0) .attr("y", 0) .attr("dy", -3) .text("I am a label") ข้อดีหรือเหตุผลในการตั้งค่าทั้ง y และ dy คืออะไรเมื่อสิ่งต่อไปนี้ดูเหมือนจะทำสิ่งเดียวกัน chart.append("text") .attr("x", 0) .attr("y", -3) .text("I am a label")

107 svg  d3.js 

ปิด. คำถามนี้ไม่เป็นไปตามหลักเกณฑ์กองมากเกิน ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน6 ปีที่ผ่านมา ปรับปรุงคำถามนี้ เห็นD3.jsแล้วสนใจเลยซื้อหนังสือเล่มนี้! ฉันอาจจะคิดผิด แต่ฉันพบว่ามันไม่สมหวัง มีใครบ้างที่มีเนื้อหาหลักสำหรับการเรียนรู้การD3.jsแสดงข้อมูล ฉันมองเห็นศักยภาพมากมายD3.jsและฉันกระตือรือร้นและสนใจมาก ขอบคุณล่วงหน้า! อัปเดต: ฉันเพิ่งอ่านInteractive Data Visualizationสำหรับเว็บโดย Scott Murray หนังสือที่ยอดเยี่ยม! ลองใช้งานได้ฟรี

104 javascript  d3.js  data-visualization 

อ้างถึงตัวอย่างนี้: http://vallandingham.me/stepper_steps.html ดูเหมือนว่าไลบรารี D3 และ jQuery จะคล้ายกันมากในแง่ที่ว่าทั้งสองทำการจัดการ DOM ด้วยวิธีการผูกมัดวัตถุ ฉันอยากรู้ว่าฟังก์ชั่นอะไรที่ D3 ทำให้ง่ายกว่า jQuery และในทางกลับกัน มีไลบรารีกราฟและการแสดงภาพจำนวนมากที่ใช้ jQuery เป็นพื้นฐาน (เช่นแผนภูมิสูง, กองเรือ, วิจโม). โปรดยกตัวอย่างเฉพาะว่าแตกต่างกันอย่างไร

103 javascript  jquery  d3.js 

ฉันต้องการที่จะทำให้วิธีการ fadeOut (คล้ายกับ jQuery) โดยใช้D3.js สิ่งที่ฉันต้องการจะทำคือการตั้งค่าความทึบเป็น 0 transition()โดยใช้ d3.select("#myid").transition().style("opacity", "0"); ปัญหาคือฉันต้องการการติดต่อกลับเพื่อให้ทราบเมื่อการเปลี่ยนแปลงเสร็จสิ้น ฉันจะใช้การโทรกลับได้อย่างไร

98 javascript  d3.js  transition 

ฉันจะเพิ่มป้ายข้อความให้กับแกนใน d3 ได้อย่างไร ตัวอย่างเช่นฉันมีกราฟเส้นธรรมดาที่มีแกน x และ y บนแกน x ของฉันฉันมีขีดตั้งแต่ 1 ถึง 10 ฉันต้องการให้คำว่า "วัน" ปรากฏอยู่ข้างใต้เพื่อให้ผู้คนรู้ว่าแกน x กำลังนับวัน ในทำนองเดียวกันบนแกน y ฉันมีตัวเลข 1-10 เป็นขีดและฉันต้องการให้คำว่า "แซนวิชกิน" ปรากฏด้านข้าง มีวิธีง่ายๆในการทำเช่นนี้หรือไม่?

94 javascript  d3.js  axis-labels