web-dev-qa-db-fra.com

Afficher plusieurs graphiques d3.js dans une seule page HTML

J'ai le code d3.js qui est collé ici .

J'essaie d'afficher plus d'un graphique dans la même page. Bien que le code d3.js soit le même. Dites l'un de data1.json et l'autre de data2.json. Voici l'extrait qui me dérange.

<svg width="960" height="960"></svg>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg2 = d3.select("svg"),
    margin = 20,
    diameter = +svg2.attr("width"),
    g = svg2.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

Selon différentes réponses dans SO here , here , here , here ou here , la solution semble être l’une des suivantes:

  • Utilisez un nom de variable différent pour contenir les svgs tels que svg1, svg2 .. etc .. Que j'ai fait. 

  • Utilisez une méthode telle que décrite here .

       var chart1 = d3.select("#area1")
       .append("svg")

La méthode deux ne fonctionne pas pour moi, car elle affiche une page vierge.

Comment résoudre ce problème Je suis sûr que je ne reçois pas la syntaxe correctement.

javascriptjqueryhtmld3.jssvg
5
kingmakerking

Il n'y a aucun problème à utiliser plusieurs SVG sur la même page. Voici un exemple:

var svg1 = d3.select("#svg1");
svg1.append("circle")
       .attr("cx",100)
       .attr("cy", 100)
       .attr("r", 90)
       .attr("fill", "red");
var svg2 = d3.select("#svg2");
svg2.append("circle")
       .attr("cx",100)
       .attr("cy", 100)
       .attr("r", 90)
       .attr("fill", "blue");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="200" height="200" id="svg1"></svg>
<svg width="200" height="200" id="svg2"></svg>

4
squeamish ossifrage

Il n'est pas nécessaire de répéter tout le code, comme vous le faites actuellement. Ne te répète pas .

Une alternative simple consiste à intégrer tout votre code D3 dans une fonction comportant deux paramètres, selector et url:

function draw(selector, url){
    //code here
};

Ensuite, dans cette fonction draw, vous définissez la position de votre SVG:

var svg = d3.select(selector).append("svg")...

Et l'URL que vous obtenez les données:

d3.json(ulr, function(error, root) {...

Après cela, appelez simplement la fonction draw à deux reprises, avec des arguments différents:

draw(selector1, url1);
draw(selector2, url2);

Voici une démo, lisez-la attentivement pour voir comment cela fonctionne:

draw("#svg1", "#data1");
draw("#svg2", "#data2");

function draw(selector, url){

var data = d3.csvParse(d3.select(url).text())

var width = 500,
    height = 150;

var svg = d3.select(selector)
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var xScale = d3.scalePoint()
    .domain(data.map(function(d) {
        return d.name
    }))
    .range([50, width - 50])
    .padding(0.5);

var yScale = d3.scaleLinear()
    .domain([0, d3.max(data, function(d) {
        return d.value
    }) * 1.1])
    .range([height - 20, 6]);

var line = d3.line()
	.x(function(d){ return xScale(d.name)})
	.y(function(d){ return yScale(d.value)});
	
svg.append("path")
	.attr("d", line(data))
	.attr("stroke", "teal")
	.attr("stroke-width", "2")
	.attr("fill", "none");

var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

svg.append("g").attr("transform", "translate(0,130)")
    .attr("class", "xAxis")
    .call(xAxis);

svg.append("g")
    .attr("transform", "translate(50,0)")
    .attr("class", "yAxis")
    .call(yAxis);

}
pre {
display: none;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<div>First SVG</div>
<div id="svg1"></div>
<div>Second SVG</div>
<div id="svg2"></div>
<pre id="data1">name,value
foo,8
bar,1
baz,7
foobar,9
foobaz,4</pre>
<pre id="data2">name,value
foo,1
bar,2
baz,3
foobar,9
foobaz,8</pre>

3
Gerardo Furtado

Si les deux graphiques utilisent le même code, je pense que la façon la plus d3 de le faire serait de 

var width = 960,
    height = 960,
    margin = 30;

var svgs = d3.select('#area1')
    .selectAll('svg')
    .data([json1, json2])
    .enter()
    .append('svg')
    .attr('width', width)
    .attr('height', height)

svgs.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .each(function(d) {console.log(d)}) // will log json1, then json2

Vous aurez ensuite json1 et json2 liés à chacun des svgs nouvellement ajoutés, et tout le code qui suit sera fait aux deux.

var width = 200,
    height = 100,
    margin = 30;

var svgs = d3.select('#area1')
    .selectAll('svg')
    .data([{text:'thing1'}, {text:'thing2'}])
    .enter()
    .append('svg')
    .attr('width', width)
    .attr('height', height);

svgs.append("text")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .text(function(d) {return d.text});
<script src="https://d3js.org/d3.v4.js"></script>
<div id='area1'></div>

0
Ryan Lee Simms