Wie Sie sql-Abfragen Verwenden, um zu zeichnen dynamisches Diagramm in NV D3?

Den untenstehenden code für horizontales Balkendiagramm, das gut funktioniert aber jetzt brauche ich, um abrufen von Daten aus sql-Datenbank entsprechend soll das Diagramm dynamisch ändern, also wo könnte ich das einfügen von sql-Abfragen in diesen code und was ist das format bitte helfen Sie mir, Jungs.

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<link href="Scripts/nv.d3.css" rel="stylesheet" type="text/css">
<script src="Scripts/d3.v3.js"></script>
<script src="Scripts/nv.d3.js"></script>
<script src="Scripts/utils.js"></script>
<script src="Scripts/tooltip.js"></script>
<script src="Scripts/models/axis.js"></script>
<script src="Scripts/models/multiBarHorizontal.js"></script>
<script src="Scripts/models/multiBarHorizontalChart.js"></script>
<script src="Scripts/bar.js"></script>

</head>

<body>

<div id="chart" style="height:700px">
<svg>
</svg>
</div>



<script>

d3.json("data.json",function(error,data){
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarHorizontalChart()
  .x(function(d) { return d.label })
  .y(function(d) { return d.value })
  .margin({top: 30, right: 20, bottom: 50, left: 175})
  .showValues(true)
  .tooltips(false)
  .showControls(false);

  chart.yAxis
  .tickFormat(d3.format(',.0f'));

  d3.select('#chart svg')
  .datum(data)
  .transition().duration(500)
  .call(chart);

 nv.utils.windowResize(chart.update);

 chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

 return chart;
 });
 });

</script>
</body>
</html>

Hier sind meine Daten.json

{"values":[
{"label":"Alaska","value":3},
{"label":"Alabama","value":4},
{"label":"Arkansas","value":5},
{"label":"Arizona","value":7},
{"label":"California","value":8},
{"label":"Colorado","value":9},
{"label":"Missouri","value":31}]}

Ein Weg dies zu tun ist, wäre zu ersetzen, die var data = ... Abschnitt mit einem Daten-import-Funktion wie d3.json(filename.php) wo die filename.php Datei Abfragen Ihrer Datenbank und gibt die Daten an das Skript. Mehr Infos finden Sie hier; d3noob.org/2013/02/using-mysql-database-as-source-of-data.html. Haben, Lesen und sehen, ob es funktionieren würde für Ihre situation.
Kann ich eine json-Datei ? wie das geht , habe ich keine Grafik während der Verwendung von Daten.json in den code.
Daten im JSON-format ist sicherlich brauchbar. (github.com/mbostock/d3/wiki/Requests#wiki-d3_json) und durch Rücksendung der Daten im JSON-format von einem PHP-Skript, können Sie die Schnittstelle mit einer MySQL-Datenbank. Dies ist keine triviale Sache, so müssen Sie möglicherweise einige Googeln um zu sehen, wie es am besten für Ihre Anwendung.
Hi d3noob! ich habe versucht diesem Beispiel nvd3.org/ghpages/multiBarHorizontal.html die bar wird nicht angezeigt, wenn ich halten json aus der Quelle.. bitte geben Sie alle arbeiten Beispiel, die Daten.json aus der Quelle......
Ich sehe einen Hinweis in den Kommentaren auf dieser Seite, dass es vielleicht ein bug in der Seite. Das folgende Diagramm zieht Daten aus einer JSON-Quelle bl.ocks.org/d3noob/5015397. Aber die Methode ist ziemlich allgegenwärtig. und können nur als Ihr nutzen, csv-oder tsv (so lange, wie die Daten ordnungsgemäß formatiert ist. Wenn lese ich deine ursprüngliche Frage richtig, Sie wollte, um Daten aus einer SQL-Datenbank. Es wird wichtiger, zu verstehen, sodass die Daten mit Hilfe von PHP als Import JSON. Siehe den link im ersten Kommentar für ein intro.
Hi d3noob, Danke 🙂 ich bezog die Seite sein scheint, dass es einige bugs hat, die ich jetzt meinem Szenario verwende ich das Diagramm in der MVC-Anwendung und meine Datenbank ist MS-SQL-server. Ich view basiert auf html 5. Das obige Diagramm ist hart codiert, wenn ich getrennt von json und laden von außen bedeutet, es nicht zu zeigen Graphen, bitte überprüfen Sie den code und sagen, was fehlt. Ich benutzte d3.json("Daten.json",function(error,data){ "
Hi, der code, den Sie haben oben keinen Verweis auf d3.json("data.json",function(error,data){. Beziehen Sie sich auf ein anderes script?
Hi d3noob ich war nicht aktualisiert, die post , jetzt ist es bitte überprüfen Sie und sagen Sie den code, mit dem ich die Daten zu halten.json im selben Ordner, wo die html-befindet. Alles was ich brauche ist in der Lage zu verwenden json-Datei von der externen Ressource. Danke:)

InformationsquelleAutor Purushoth | 2013-02-25

d3.js nvd3.js

OK, was ich gemacht habe, ist wieder die original-Beispiel-Datei, die enthalten ist in der nvd3 heruntergeladene zip-Datei.
Beginnend mit der multiBarHorizontalChart.html Datei, Ordner Beispiele. Ich war in der Lage, Bearbeiten Sie die Datei so, dass es aussah, wie dieser;

<!DOCTYPE html>
<meta charset="utf-8">

<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">

<style>

body {
  overflow-y:scroll;
}

text {
  font: 12px sans-serif;
}

#chart1 {
  margin: 10px;
  min-width: 100px;
  min-height: 100px;
}

#chart1 svg {
  height: 500px;
}

</style>
<body>

  <div id="chart1">
    <svg></svg>
  </div>

<script src="../lib/d3.v2.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/multiBarHorizontal.js"></script>
<script src="../src/models/multiBarHorizontalChart.js"></script>
<script src="stream_layers.js"></script>
<script>

d3.json('data.json', function(data) {

var chart;
nv.addGraph(function() {
chart = nv.models.multiBarHorizontalChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .margin({top: 30, right: 20, bottom: 50, left: 175})
      .showValues(true)
      .tooltips(false)
      .barColor(d3.scale.category20().range())
      .showControls(true);

  chart.yAxis
      .tickFormat(d3.format(',.2f'));

  d3.select('#chart1 svg')
      .datum(data)
    .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});
});

</script>

Sollten Sie in der Lage sein, zu beachten, die d3.json('data.json', function(data) { line-in gibt es, die wird laden Sie Ihre JSON-Datei, die aufgerufen wird, die Daten.json.

[
  {"values":
    [
      {"label":"Alaska","value":3},
      {"label":"Alabama","value":4},
      {"label":"Arkansas","value":5},
      {"label":"Arizona","value":7},
      {"label":"California","value":8},
      {"label":"Colorado","value":9},
      {"label":"Missouri","value":31}
    ]
  }
]

Ist es möglich, dass dies ist, wo Sie waren markante Probleme wie Sie sehen werden, dass es einen zusätzlichen Satz von eckigen Klammern [] außerhalb der Daten. Wenn Sie einen Blick auf die sample-Daten enthalten war mit das Beispiel, Sie sind dort auch (sonst wäre ich nicht schon bekannt ist).

Wie Sie sql-Abfragen Verwenden, um zu zeichnen dynamisches Diagramm in NV D3?

Hoffentlich setzen Sie ein wenig weiter entlang.

Werden Sie wollen jetzt check out wie zu verwenden ein php-script zur Abfrage Ihrer Datenbank, die Daten zurück, die in korrekt formatierten JSON und rufen Sie dann das Skript von dem Punkt, wo Sie zunächst als die Daten.json-Datei.