it-swarm.com.de

d3.select ("# element") funktioniert nicht, wenn Code über dem HTML-Element liegt

Das funktioniert:

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

Das tut nicht:

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

Ich habe versucht, den Code in eine Jquery-Datei document.ready () zu packen, das Element mit Jquery zu packen und an d3.select zu übergeben. Edit Nachdem ich die Jquery document.ready () -Syntax richtig verstanden hatte, hat es funktioniert.

Wie kann ich das Javascript oben auf der Seite einfügen und trotzdem ein Element auswählen? Vielen Dank.

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

Mit anderen Worten, es passiert nicht, weil Sie nicht nach etwas fragen können, das es noch nicht gibt - tun Sie es einfach nach dem Laden der Seite (hier über Jquery).

Übrigens, es wird empfohlen, dass Sie Ihre JS-Dateien vor dem Schließen Ihres Body-Tags platzieren.

67
Micah

Noch nicht genug Ruf, um einen Kommentar abzugeben.

Um die Antwort von Micah zu erweitern, führt der Browser Ihren Code von oben nach unten aus. Wenn Sie also schreiben:

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

Der Browser erstellt ein Div mit der ID "Diagramm" und führt dann Ihr Skript aus, das versucht, das Div und den Erfolg zu finden.

Ansonsten, wenn Sie schreiben:

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

Der Browser führt Ihr Skript aus und versucht, ein Div mit Id-Diagramm zu finden. Dieses wurde jedoch noch nicht erstellt und schlägt daher fehl. 

DANN erstellt der Browser ein Div mit der ID "Chart".

14
Azrantha

Verwenden Sie die Funktion 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

Ich habe gerade herausgefunden, dass, wenn Ihre Element-ID nur ein _ number ist, dann d3.select ("1234") nicht funktioniert.

Die eindeutige ID muss ein alpha-numeric-Zeichen sein.

d3.select ("1234")

d3.select ("container1234")

0
Mahesh

fügen Sie einfach Ihren <script src="./custom.js"></script> vor dem </bod>-Tag hinzu. Das ist die Bereitstellungszeit, um d3.select(#chart) Ihr #chart-Element im HTML-Body zu erkennen

0
hossein