jQuery Girl
  1. jQuery Girl
  3. Inclure json dans cette vue d’agenda d3.js?
Intereting Posts
Modifier dynamicment plusieurs champs de formulaire masqués Vérification orthographique de Google http://www.google.com/tbproxy/spell? génère une erreur 404 Rendre l’élément scroll plus lent (Parrallax) Comportement étrange de jQuery slideToggle jQuery enchaînant et en cascade alors et quand Existe-t-il un type de solution de secours jQuery.browser? Pourquoi jQuery a-t-il undefined dans sa signature d’argument et pourquoi passe-t-il à nouveau window? Quel est le meilleur moyen d’appeler un service Web .net à l’aide de jquery? Ajout de contenu avec jQuery jquery setTimeout à l’intérieur de chaque jQuery Basculer Afficher / Masquer avec plusieurs ID DIV JQuery: Modifier la valeur du champ de saisie masqué HTML / Javascript – Accédez à un onglet / une fenêtre de navigateur déjà ouvert Comment changer un élément (par exemple, h1 -> h2) en utilisant jQuery / plain old javascript? Faire un champ en lecture seule – case à cocher – jQuery

Inclure json dans cette vue d’agenda d3.js?

Je suis nouveau dans les charts d3 et javascript, et cela a été une bataille difficile.

Après quelques recherches, j’ai été en mesure de remplir le graphique avec un fichier CSV. Alors maintenant, j’essaie de remplir le graphique avec des données json .

Ceci est mon code. C’est vaguement basé sur cet exemple . Mais je préfère utiliser mon code (c.-à-d. D3.v4): 

 var width = 960, height = 136, cellSize = 17; var color = d3.scaleQuantize() .domain([9000, 12000]) .range(["Blue", "Red", "Green", "Yellow", "Purple", "Black"]); var dateParse = d3.timeFormat("%Y-%m-%d"); var svg = d3.select("body") .selectAll("svg") .data(d3.range(2017, 2018)) .enter().append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")"); svg.append("text") .attr("transform", "translate(-6," + cellSize * 3.5 + ")rotate(-90)") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .text(function(d) { return d; }); var rect = svg.append("g") .attr("fill", "none") .attr("stroke", "#ccc") .selectAll("rect") .data(function(d) { return d3.timeDays(new Date(d, 0, 1), new Date(d + 1, 0, 1)); }) .enter().append("rect") .attr("width", cellSize) .attr("height", cellSize) .attr("x", function(d) { return d3.timeWeek.count(d3.timeYear(d), d) * cellSize; }) .attr("y", function(d) { return d.getDay() * cellSize; }) .datum(d3.timeFormat("%Y-%m-%d")); svg.append("g") .attr("fill", "none") .attr("stroke", "#000") .selectAll("path") .data(function(d) { return d3.timeMonths(new Date(d, 0, 1), new Date(d + 1, 0, 1)); }) .enter().append("path") .attr("d", pathMonth); d3.json("data3.json", function(error, data) { //populating data since i don't have the file data = [{ "date": "2017-01-04", "open": 10430.69 }, { "date": "2017-01-05", "open": 10584.56 }]; data.forEach(function(d) { d.dd = dateParse(new Date(d.date)); console.log(d.dd); }); var nest = d3.nest() .key(function(d) { return d.dd; }) .map(data); rect.filter(function(d) { return d in data; }) .attr("fill", function(d) { return color(data[d]); }) .append("title") .text(function(d) { return d + ": " + data[d]; }); }); function pathMonth(t0) { var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0), d0 = t0.getDay(), w0 = d3.timeWeek.count(d3.timeYear(t0), t0), d1 = t1.getDay(), w1 = d3.timeWeek.count(d3.timeYear(t1), t1); return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize + "H" + w0 * cellSize + "V" + 7 * cellSize + "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize + "H" + (w1 + 1) * cellSize + "V" + 0 + "H" + (w0 + 1) * cellSize + "Z"; }