d3.select ("# तत्व") काम नहीं कर रहा है जब HTML तत्व ऊपर कोड

Question

यह काम करता है:

<div id="chart"></div> 
<script>var svg = d3.select("#chart").append("svg:svg");</script> 

यह नहीं करता है:

<script>var svg = d3.select("#chart").append("svg:svg");</script> 
<div id="chart"></div> 

मैं एक jQuery में कोड लपेटकर की कोशिश की document.ready(), jquery के साथ तत्व को पकड़ना, और इसे d3.select में गुजरना, लेकिन यह भी काम नहीं करता है। संपादित करें एक बार मुझे jquery document.ready() वाक्यविन्यास सही मिला, यह काम किया।

किसी भी तरह से मैं पेज के शीर्ष पर जावास्क्रिप्ट शामिल कर सकते हैं और अभी भी नीचे एक तत्व का चयन? धन्यवाद।

Answer 1

<script>$(function(){var svg = d3.select("#chart").append("svg:svg");});</script> 
<div id="chart"></div> 

दूसरे शब्दों में, यह नहीं हो रहा है क्योंकि आप कुछ है कि (jQuery के माध्यम से यहाँ) yet-- तो बस कर अस्तित्व में नहीं है पृष्ठ लोड के बाद के खिलाफ क्वेरी नहीं कर सकता।

Btw, इसकी सिफारिश की है कि आप अपने शरीर टैग बंद होने से पहले अपने जे एस फ़ाइलें रख।

Answer 2

पर्याप्त नहीं प्रतिष्ठा अभी तक कोई टिप्पणी तो मैं बस यहाँ इस डाल देता हूँ करने के लिए:

मीका के जवाब पर विस्तार करने के लिए - ब्राउज़र नीचे करने के लिए अपने कोड शीर्ष चलाता है, इसलिए यदि आप लिखना:

<div id="chart"></div> 
<script>var svg = d3.select("#chart").append("svg:svg");</script> 

ब्राउज़र आईडी "चार्ट" के साथ एक div बना देगा, और फिर अपनी स्क्रिप्ट चलाएगा, जो उस div को खोजने का प्रयास करेगा, और, hurray, सफलता।

अन्यथा यदि आप लिखना:

<script>var svg = d3.select("#chart").append("svg:svg");</script> 
<div id="chart"></div> 

ब्राउज़र अपनी स्क्रिप्ट चलाता है, और आईडी चार्ट के साथ एक div खोजने की कोशिश करता है, लेकिन यह अभी तक नहीं बनाया नहीं किया गया है तो यह विफल रहता है।

तो ब्राउज़र आईडी "चार्ट" के साथ एक div पैदा करता है।

Answer 3

उपयोग jQuery $(document) समारोह ...

$(document).ready(function(){ 

var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var x0 = d3.scale.ordinal() 
    .rangeRoundBands([0, width], .1); 

var x1 = d3.scale.ordinal(); 

var y = d3.scale.linear() 
    .range([height, 0]); 

var color = d3.scale.ordinal() 
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 

var xAxis = d3.svg.axis() 
    .scale(x0) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .tickFormat(d3.format(".2s")); 

//d3.select('#chart svg') 
//d3.select("body").append("svg") 


    //var svg = d3.select("#chart").append("svg:svg"); 

    var svg = d3.select("#BarChart").append("svg:svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    var updateData = function(getData){ 

    d3.selectAll('svg > g > *').remove(); 

    d3.csv(getData, function(error, data) { 
     if (error) throw error; 

     var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; }); 

     data.forEach(function(d) { 
     d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; }); 
     }); 

     x0.domain(data.map(function(d) { return d.State; })); 
     x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]); 
     y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]); 

     svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

     svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis) 
     .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", ".71em") 
      .style("text-anchor", "end") 
      .text("Population"); 

     var state = svg.selectAll(".state") 
      .data(data) 
     .enter().append("g") 
      .attr("class", "state") 
      .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; }); 

     state.selectAll("rect") 
      .data(function(d) { return d.ages; }) 
     .enter().append("rect") 
      .attr("width", x1.rangeBand()) 
      .attr("x", function(d) { return x1(d.name); }) 
      .attr("y", function(d) { return y(d.value); }) 
      .attr("height", function(d) { return height - y(d.value); }) 
      .style("fill", function(d) { return color(d.name); }); 

     var legend = svg.selectAll(".legend") 
      .data(ageNames.slice().reverse()) 
     .enter().append("g") 
      .attr("class", "legend") 
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

     legend.append("rect") 
      .attr("x", width - 18) 
      .attr("width", 18) 
      .attr("height", 18) 
      .style("fill", color); 

     legend.append("text") 
      .attr("x", width - 24) 
      .attr("y", 9) 
      .attr("dy", ".35em") 
      .style("text-anchor", "end") 
      .text(function(d) { return d; }); 

    }); 

} 

updateData('data1.csv'); 

}); 

Answer 4

सिर्फ अपने <script src="./custom.js"></script></bod> से पहले टैग को जोड़ने। कि d3.select(#chart) के लिए आपूर्ति समय