web-dev-qa-db-fra.com

d3.select ("# element") ne fonctionne pas lorsque le code est supérieur à l'élément html

Cela marche:

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

Cela ne veut pas:

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

J'ai essayé d'encapsuler le code dans un document jQuery.ready (), en saisissant l'élément avec JQuery et en le passant dans d3.select, mais cela n'a pas fonctionné non plus. Éditer Une fois que j'ai eu la syntaxe jquery document.ready () correcte, cela a fonctionné.

De toute façon, je peux inclure le javascript en haut de la page et toujours sélectionner un élément ci-dessous? Merci.

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

En d'autres termes, cela ne se produit pas car vous ne pouvez pas interroger quelque chose qui n'existe pas encore - alors faites-le après le chargement de la page (ici via jquery).

Au fait, il est recommandé de placer vos fichiers JS avant la fermeture de votre balise body.

67
Micah

Pas assez de réputation pour commenter donc je vais juste mettre ça ici:

Pour développer la réponse de Micah, le navigateur exécute votre code de haut en bas, donc si vous écrivez:

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

Le navigateur créera un div avec l'id "chart", puis exécutera votre script, qui tentera de trouver ce div et, le plus vite possible.

Sinon, si vous écrivez:

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

Le navigateur exécute votre script et essaie de trouver un div avec id chart, mais comme il n'a pas encore été créé, il échoue. 

ALORS le navigateur crée un div avec id "chart".

14
Azrantha

Utilisez la fonction 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');

});
2
Karthi

Je viens de découvrir que si votre identifiant d'élément est juste une number, d3.select ("1234") ne fonctionnera pas.

L'identifiant unique doit être un caractère alpha-numeric.

d3.select ("1234")

d3.select ("conteneur1234")

0
Mahesh

ajoutez simplement votre balise <script src="./custom.js"></script> avant </bod>. c’est le temps nécessaire pour que d3.select(#chart) détecte votre élément #chart dans le corps html

0
hossein