d3.select(„#element”) nu funcționează când codul se află deasupra elementului html (Programare, D3.Js)

Rick Jolly a intrebat.
a intrebat.

Acest lucru funcționează:

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

Acest lucru nu funcționează:

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

Am încercat să înfășor codul într-un jquery document.ready(), să prind elementul cu jquery și să îl trec în d3.select, dar nici asta nu a funcționat. Editează Odată ce am înțeles corect sintaxa jquery document.ready(), a funcționat.

Există vreo modalitate prin care pot include javascript în partea de sus a paginii și totuși să selectez un element de mai jos? Mulțumesc.

Comentarii

  • O soluție ușoară, dar complicată, deoarece se poate uita cu ușurință. Așa cum a fost scris de cea mai votată soluție. Aveți grijă să vă jucați cu elementele dom înainte ca acestea să fie create. Cu alte cuvinte, înainte ca acestea să existe în ierarhia dorm. Deci, încărcați scriptul după elementul cu numele de char ID. – user3672653
6 răspunsuri
Micah
<script>$(function(){var svg = d3.select("#chart").append("svg:svg");});</script>
<div id="chart"></div>

Cu alte cuvinte, nu se întâmplă pentru că nu poți interoga ceva care nu există încă… așa că fă-o după ce se încarcă pagina (aici prin jquery).

Btw, este recomandat să plasați fișierele JS înainte de închiderea tag-ului body.

Comentarii

  • Am încercat și cu jquery d3.select($("#chart")), dar nici asta nu a funcționat. În ciuda faptului că în documentele D3 se precizează: These methods can also accept nodes, which is useful for integration with third-party libraries such as jQuery or developer tools –  > Por Rick Jolly.
  • Cred că nu înțelegi sensul mesajului meu, și anume că încerci să faci o interogare pentru ceva care nu există încă. Gândește-te la asta… în timp ce pagina se încarcă în browser execută codul. Dacă JS-ul dvs. este înaintea elementului pe care încearcă să-l interogheze, se execută în timp ce acel nod nu există… ați înțeles? Trebuie să așteptați până când DOM-ul este complet încărcat (sau până când nodul cu care lucrați este complet încărcat) pentru a-l putea interoga. –  > Por Micah.
  • Rick Jolly, d3.select se așteaptă la un element DOM, nu la un obiect jquery. Ați dori să utilizați $(„#chart”)[0]. Elementul [0] este referința elementului DOM. –  > Por DRaehal.
  • Mulțumesc, m-ați salvat de la o mulțime de depanări. –  > Por Tarik.
Azrantha

Nu am suficientă reputație pentru a comenta încă, așa că voi pune asta aici:

Pentru a extinde răspunsul lui Micah – browserul rulează codul de sus în jos, așa că, dacă scrieți:

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

Browserul va crea un div cu id „chart”, apoi va rula scriptul tău, care va încerca să găsească acel div și, ura, succes.

În caz contrar, dacă scrieți:

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

Browserul va rula scriptul dvs. și va încerca să găsească un div cu id-ul „chart”, dar acesta nu a fost încă creat, așa că nu va reuși.

Apoi, browserul creează un div cu id „chart”.

Karthi

Utilizați jQuery $(document) funcția…

$(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');

});

Comentarii

  • ce legătură are tot acest cod cu întrebarea? –  > Por eagor.
hossein

adăugați doar <script src="./custom.js"></script> înainte de </bod> tag. care este timpul de aprovizionare pentru d3.select(#chart) detecta #chart element în corpul html

Mahesh

Tocmai am aflat că dacă id-ul elementului tău este doar un number, atunci d3.select(„1234”), nu va funcționa.

Id-ul unic trebuie să fie un alpha-numeric caracter.

d3.select(„1234”)

d3.select(„container1234”)

Bhushan Mahajan

Vă rugăm să încercați această abordare. A funcționat pentru mine.

<head> 
<script  type="text/javascript" src='./d3.v4.min.js'></script>
</head> 

<body>
    <div id="jschart41448" style="color:red">
        Hi red
    </div>

    <div id="jschart41449" style="color:blueviolet">
        Hi blueviolet
    </div>

 <script type="text/javascript"   >
            d3.select("#jschart41448").style('color', 'green' , null);
            d3.select("#jschart41449").style('color', 'yellow', null);
</script>
</body>

Tags: