d3.sélectionnez(“#element”) ne fonctionne pas lorsque le code au-dessus de l'élément html

Cela fonctionne:

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

Ce n'est pas le cas:

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

J'ai essayé d'emballage le code jquery document.ready(), en saisissant l'élément avec jquery, et en passant en d3.sélectionnez, mais cela ne fonctionne pas non plus. Modifier une Fois que j'ai eu l'jquery document.prêt() syntaxe droit, il a travaillé.

Toute façon je peux inclure du javascript dans le haut de la page, et encore sélectionner un élément ci-dessous? Merci.

Solution facile, mais d'une question délicate que l'on pourrait facilement oublier. Comme l'écrit le plus voté solution. Soyez prudent au sujet de jouer avec les éléments dom, avant qu'ils sont en train d'être créé. En d'autres mots, avant qu'ils existent dans le dortoir de la hiérarchie. Pour charger le script après l'élément par le nom de char ID.

InformationsquelleAutor Rick Jolly | 2013-05-29

d3.js

72
```
<script>$(function(){var svg = d3.select("#chart").append("svg:svg");});</script>
<div id="chart"></div>
```
En d'autres termes, il ne se passe rien parce que vous ne pouvez pas requête contre quelque chose qui n'existe pas encore-si juste de le faire après le chargement de la page (ici via jquery).

Btw, son recommandé que vous placez vos fichiers JS, avant la fermeture de votre balise body.
- J'ai essayé de jquery ainsi d3.select($("#chart")), mais cela ne fonctionne pas non plus. En dépit de la D3 docs en déclarant: These methods can also accept nodes, which is useful for integration with third-party libraries such as jQuery or developer tools
- Je pense que vous êtes à côté de la question de mon post-- qui est que vous essayez de requête contre quelque chose qui n'existent pas encore. Penser, comme le chargement de la page dans le navigateur de son exécution. Si votre JS est avant de l'élément de sa tente à la requête de son exécution, tandis que le nœud n'existe pas-- de comprendre? Vous DEVEZ attendre jusqu'à ce que le DOM est chargé complètement (ou le nœud que vous travaillez avec est entièrement chargé) afin de les interroger.
- Rick Jolly, d3.sélectionnez s'attend à un élément du DOM pas un objet jquery. Vous pouvez utiliser $("#graphique")[0]. L' [0] élément est l'élément du DOM de référence.
InformationsquelleAutor Micah
15

Pas assez de réputation de commentaire pour le moment donc je vais mettre ça ici:

De se développer sur de Micah réponse - le navigateur exécute votre code de haut en bas, alors si vous écrivez:
```
<div id="chart"></div>
<script>var svg = d3.select("#chart").append("svg:svg");</script>
```
Le navigateur va créer une div avec l'id "graphique", puis exécutez votre script, qui va essayer de trouver div, et, hourra, succès.

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 l'id de tableau, mais il n'a pas encore été créé de sorte qu'il échoue.

ENSUITE le navigateur crée un div avec l'id "graphique".

InformationsquelleAutor Azrantha

Utiliser jQuery $(document) fonction...

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

qu'est-ce code ont à voir avec la question?
Exemple travaillé pour prêt à l'emploi. Simple 🙂

InformationsquelleAutor Karthi

0

suffit d'ajouter votre <script src="./custom.js"></script> avant </bod> tag. c'est l'offre le temps de d3.select(#chart) détecter votre #chart élément dans le corps html

InformationsquelleAutor hossein
0

Je viens de constater que si votre id de l'élément est juste un number, puis la d3.sélectionnez("1234"), ne fonctionnera pas.

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

~~d3.sélectionnez("1234")~~

d3.sélectionnez("container1234")

InformationsquelleAutor Mahesh

-1

S'il vous plaît essayer cette approche. Il a travaillé pour moi.

<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>

InformationsquelleAutor Bhushan Mahajan

Vous devez vous connecter pour publier un commentaire.