, opbygge en multilinje, figur med d3.js: del 2,,,,, 99,,,,,,,, 16,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss. denne post er en del af en serie kaldet bygning et multilinje, figur med d3.js.building en multilinje, figur ved hjælp af d3. er i sidste del af denne række, så vi, hvordan at komme i gang med at skabe en multilinje, kort efter   d3.js javascript bibliotek.i denne forelæsning, vi tager det til det næste niveau ved at gøre multilinje, figur på data, dynamisk, og vi vil tilføje nogle karakteristika som tutor skrider frem.,, at komme i gang, lad os komme i gang med kloning, første del af læren fra github., så klon https: ////////github. kom /jay3dec /multilinechart_d3. ud, sejle til  , multilinechart_d3 og browse index.html,, og du skal have en multilinje, diagram baseret på   prøvedata.,, at det område, dynamisk, i   tidligere lektion, da vi oprettede, xscale, og yscale, ved hjælp af afstand og område, vi hårdt med den minimale og maksimale for dette område.for at gøre vores diagram mere fleksibelt, vi har brug for at læse den minimale og maksimale værdier for området dynamisk fra datakilde.,, d3.js giver  , d3.min, og d3.max, metoder til at få   minimale og maksimale værdier fra en bred vifte af hhv.We'll make use of these functions to get the minimum and maximum values for the domain.,,We can get the minimum value from an array as shown:,,d3.min(data, function(d) { return d.value; }),,Similarly, in order to get the maximum value:,,d3.max(data, function(d) { return d.value; }),,Simply replace the minimum and maximum values in the ,xScale, domain as shown: ,,xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(data, function(d) { return d.year; }), d3.max(data, function(d) { return d.year; })]),,,Similarly, replace the ,yScale, domain:,,yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(data, function(d) { return d.sale; }), d3.max(da- funktion (d) (tilbage d.sale.})]), at redde alle de ændringer og browse index.html,.nu skal du have den figur fungerer godt, som det var tidligere.den eneste forskel er, at det er op til det maksimale og minimale værdier dynamisk.,, og at skabe overensstemmelse figur dynamisk, holde en enkelt json genstand for prøven ville gøre det lettere at analysere data og lægge den på kortet.So combine the two pieces of sample data into a single JSON data string as shown below: ,,var data = [{ "Client": "ABC", "sale": "202", "year": "2000" }, { "Client": "ABC", "sale": "215", "year": "2002" }, { "Client": "ABC", "sale": "179", "year": "2004" }, { "Client": "ABC", "sale": "199", "year": "2006" }, { "Client": "ABC", "sale": "134", "year": "2008" }, { "Client": "ABC", "sale": "176", "year": "2010" }, { "Client": "XYZ", "sale": "100", "year": "2000" }, { "Client": "XYZ", "sale": "215", "year": "2002" }, { "Client": "XYZ", "sale": "179", "year": "2004" }, { "Client": "XYZ", "sale ":" 199 "," år ":" 2006 "} {" kunde ":" udsalg "," salg ":" 134 "," år ":" 2008 "} {" kunde ":" udsalg "," salg ":" 176 "," år ":" 2013 "}], nu skal vi ændre vores kodeks for at gøre vores diagram omfang dynamisk som pr. prøve datasæt og dets værdier.  , siden vi deler og   organisere data baseret på kunde, således at vi kan trække en streg figur for hver kunde i dataene.d3 er en metode, d3.nest, som medvirker til at formidle data baseret på en særlig vigtige område.We'll use ,d3.nest, to sort out the data based on ,Client, as shown:,,var dataGroup = d3.nest() .key(function(d) { return d.Client; }) .entries(data);,,Here is how the ,dataGroup, would look: ,,[{ "key": "ABC", "values": [{ "Client": "ABC", "sale": "202", "year": "2000" }, { "Client": "ABC", "sale": "215", "year": "2002" }, { "Client": "ABC", "sale": "179", "year": "2004" }, { "Client": "ABC", "sale": "199", "year": "2006" }, { "Client": "ABC", "sale": "134", "year": "2008" }, { "Client": "ABC", "sale": "176", "year": "2010" }] }, { "key": "XYZ", "values": [{ "Client": "XYZ", "sale": "100", "year": "2000" }, { "Client": "XYZ", "sale": "215", "year": "2002" }, { "Client": "XYZ", "sale": "179", "year": "2004" }, { "Client": "XYZ", "sale": "199", "year": "2006" }, { "Client": "XYZ", "sale": "134", "year": "2008" }, { "Client": "XYZ", "sale": "176", "year": "2013" }] }],,Next, remove the ,svg, line path code for line creation that we hard-coded previously.,,vis.append('svg:path') .attr('d', lineGen(data)) .attr('stroke', 'green') .attr('strhvad bredde (, 2). attr ('fill "," ingen "); vis. både ('svg: vej '). attr (»d«, linegen (data2)). attr ('stroke", "blå"). attr ('stroke-width ", 2). attr ('fill", "ingen"), i stedet vil vi iterate over, datagroup, og skabe en   linje figur for hver kunde, som vist:,, datagroup. forhvert (funktion (d) (vis. både ('svg: vej'). attr (»d«, linegen (d.values)). attr ('stroke "," blå "). attr ('stroke-width", 2). attr ('fill "," ingen ");}), redde de ændringer og forsøge at browse index.html,.kan du se den multilinje skema som vist:  ,,,,, lad os også tilføje nogle tilfældige farver til figur linjer.for at tilføje tilfældige farver, og vi vil bruge de   d3.hsl metode.ændre, slagtilfælde, attribut i overensstemmelse figur som vist nedenfor for at få tilfældige farver til linjerne.,, datagroup. forhvert (funktion (d) (vis. både ('svg: vej '). attr (»d«, linegen (d.values)). attr ('stroke, funktion (d, j) {tilbage "hsl (+ matematik. random() * 360 +", 100%, 50%); "}). attr ('stroke-width", 2). attr ('fill "," ingen ");}), redde de ændringer og browse index.html,.du skulle se   tilfældige farver til linjerne i diagrammet.,,,,, tilføje legender, næste, vil vi tilføje, legender, til kunder i stikprøven data.når legender er tilsat, vi vil lægge et klik begivenhed på legender, som vil aktivere fremvisning af de respektive linje grafer.,, for det første for at tilføje den legende, er vi nødt til at ændre den, på bunden,   og margen top,  , 50,   af hensyn til legender., var vis = d3. vælg ("# visualisering"), bredde = 1000, højde = 500, margener = (top: 50: 20, bunden: 50, venstre: 50},,, mens iterating, datagroup, vil vi tilføje noget til den pågældende budgetpost grafer.tilsætning af legender er ganske enkel.først definere legenden rum baseret på antallet af kunder eller linje. vi vil være tegning:,, lspace = bredde /datagroup. længde, tilføje en tekst til perspektivgruppen element med x - og y - koordinater, mens iterating, datagroup,   efter linjen oprettelse   som vist:,, vedlægge (vis. "tekst"). attr ("x" (lspace /2) + * lspace). attr ("y", højde). stil ("fylder", "sort"). tekst (d.key), har vi tilpasset legenden afstand (, lspace,)   baseret på antal beretninger, vi er nødt til at vise, at alle de historier er ligeligt fordelt fra hinanden.vi har delt den legende med 2, så det er center på linje i sin plads og bliver så som det skrider frem, som vi tilføje (- * lspace) til kommende legender.,, at redde alle de ændringer og forsøge at kigge,., og du skulle se legender under x - aksen.,,,,, lad os tilføje lidt stil om legender, for at gøre dem   se modig.Add the following CSS to ,index.html,:,,.legend { font-size: 14px; font-weight: bold; },,Add the class ,legend, to the legend created.,,vis.append("text") .attr("x", (lSpace /2) + i * lSpace) .attr("y", HEIGHT) .style("fill", "black") .attr("class", "legend") .text(d.key);,,,,,D3.js Events,,Now, let's add click events on each of the legends displayed to toggle the display of the corresponding line on the multi-line graph.,,First, we'll need add an ,id, for each line graph created in order to toggle its display.,,.attr('id', 'line_'+d.key),,Here is how the line creation code looks:,,vis.append('svg:path') .attr('d', lineGen(d.values, xScale, yScale)) .attr('stroke', function(d, j) { re- "hsl (+ matematik. random() * 360 +", 100%, 50%); "}). attr ('stroke-width", 2). attr ('id "," line_ + d.key). attr ('fill "," ingen "), dernæst i legenden oprettelse del tilføje, klik, tilskriver:,,. ('click, function() {indberetning (d.key)}), medmindre ændringen og browse index.html,.klik på legender, og du skal se legender navne som indberetninger.  , næste, lad os tilføje, at kodeksen greb den udstilling.vi er simpelthen nødt til at undersøge den aktuelle visning af linje figur og greb uigennemsigtighed, for at vise, at skjule den linje i overensstemmelse hermed.,,. ('click, function() {var aktive = d.active?falske: det er rigtigt, var uklarhed = aktive?0: 1; d3. vælg ("# line_" + d.key). stil ("tæthed", opacitet); d.active = aktive.}), medmindre de ændringer og forsøge at browse index.html,.prøv at trykke på legender og angivelse af den pågældende budgetpost figur bør greb.,, konklusion i denne forelæsning, så vi, hvordan vi kan gøre vores multilinje, figur dynamik.vi så også, hvordan   skabe d3.js begivenheder.for nærmere oplysninger om forskellige andre d3.js metoder og apis, se på den   officielle dokumentation.,, kildekode fra denne lektion er tilgængelig på github.,, lad os høre deres mening i bemærkningerne nedenfor.,