डी 3: डेटा, दर्ज करें, पैटर्न संलग्न करें बाहरी ब्लॉक

पर डेटा जोड़ता है मैं कुछ मूल वेब चार्ट प्रस्तुत करने के लिए डी 3 जावास्क्रिप्ट लाइब्रेरी का उपयोग कर रहा हूं। मैं तत्वों को <svg> ब्लॉक में जोड़ना चाहता हूं, लेकिन डी 3 इसके बजाय <html> ब्लॉक के अंत में तत्व जोड़ रहा है। यहाँ पूरा html स्रोत है:डी 3: डेटा, दर्ज करें, पैटर्न संलग्न करें बाहरी ब्लॉक

<!DOCTYPE html> 
<meta charset="utf-8"> 
<body> 
<script src="d3.v2.js"></script> 
<script> 
var chartData = [ 1, 2, 3 ]; 
d3.select("html").select("body").append("svg") 
    .data(chartData, function(d) { console.log("data d:", d); return d; }) 
    .enter() 
    .append("path") 
     .attr("d", function(d) { return d; }); 
</script> 
</body>

Chrome के डेवलपर कंसोल से पता चलता होने के लिए जिसके परिणामस्वरूप एचटीएमएल:

<html><head><meta charset="utf-8"> 
<style type="text/css"></style></head><body> 
<script src="d3.v2.js"></script> 
<script> 
var chartData = [ 1, 2, 3 ]; 
d3.select("html").select("body").append("svg") 
    .data(chartData, function(d) { console.log("data d:", d); return d; }) 
    .enter() 
    .append("path") 
     .attr("d", function(d) { return d; }); 
</script><svg></svg> 
</body><path d="1"></path><path d="2"></path><path d="3"></path></html>

<svg> ब्लॉक बनाया गया था, लेकिन किसी कारण से, <path> ब्लॉक इसके बारे में बाहर हैं। मैं इस त्रुटि को कैसे ठीक कर सकता हूं, और उन्हें <svg> के अंदर रख सकता हूं जहां वे संबंधित हैं?

स्रोत

2012-12-01 Toby Lael

सबसे पहले, आपके पास उच्च स्तरीय चर होना चाहिए जो केवल svg को संदर्भित करता है। दूसरा, आपको इसे बनाते समय एसवीजी की ऊंचाई और चौड़ाई निर्दिष्ट करनी चाहिए। तुम इतनी html के चुनिंदा निर्दिष्ट करने के लिए, की जरूरत नहीं है:

var width = 400, 
    height = 300; 
var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height);

अब आप पथ संलग्न करने के लिए svg चर का उपयोग कर सकते हैं। यह अनुशंसा की जाती है कि आप पथ को एक साथ समूहबद्ध करें (इसलिए "g" पहले जोड़ा गया)। और आपको पथों के लिए selectAll भी करना चाहिए, क्योंकि आप पथ तत्वों में जो डेटा जोड़ रहे हैं उसे बांधना चाहते हैं। तो:

svg.append("g").selectAll("path") 
    .data(chartData) 
    .enter().append("path") 
    .attr("d", function(d) { return d; });

मैं डी 3 ट्यूटोरियल यहाँ की सिफारिश: http://alignedleft.com/tutorials/d3/

स्रोत

2012-12-01 23:47:24 mccannf

धन्यवाद! यह पता चला है कि '.selectAll (" पथ ")' वह महत्वपूर्ण हिस्सा है जो गायब था। –

भविष्य एक ऐसी ही समस्या आ आगंतुकों के लिए: select और के बीच

यह इस मामले (और इसी तरह के अन्य) में व्यवहार के अंतर दिखाई देता है selectAll इस तथ्य पर निर्भर करता है कि selectAll एक नया समूह बनाता है।

डी 3 का चयन ऑब्जेक्ट कुछ अतिरिक्त विशेष गुणों के साथ सरणी की एक सरणी है। प्रत्येक सरणी वस्तुओं के एक समूह के अनुरूप है। समूह की एक संपत्ति parentNode है, जो नोड है जिसमें से प्रारंभिक selectAll निष्पादित किया गया था।

जब बाहरीतम चयन select है, तो रूट पूरी तरह से दस्तावेज़ के रूट नोड - इस मामले में html है।

चूंकि selectAll प्रत्येक मैच (या प्रविष्टि) के चयन के भीतर एक नया समूह बनाता है, प्रत्येक समूह को उसके माता-पिता को नोड के रूप में असाइन किया जाता है। select के साथ, चूंकि कोई भी नया समूह नहीं बनाया गया है, इसलिए प्रत्येक समूह के लिए मूल parentNode संरक्षित है, भले ही यह समूह समूह के नोड्स के मूल रूप से सटीक रूप से प्रतिनिधित्व न करे।

parentNode भी प्रतीत होता है (अनुभव) नोड के लिए जो enter चयन 'append एड नोड्स जुड़े होते हैं होने के लिए।

यही कारण है कि select ने देखा व्यवहार का उत्पादन किया, और selectAll समस्या का समाधान किया।

स्रोत

2014-07-30 14:05:26

डाउनवॉटर: क्यों? मैं उत्सुक हूँ। –

डी 3: डेटा, दर्ज करें, पैटर्न संलग्न करें बाहरी ब्लॉक

उत्तर

संबंधित मुद्दे