javascript - francais - d3.js tutorial



D3.js: Utilisation d'images(avec les noms de fichiers spécifiés dans les données) comme valeurs de coche sur l'axe (1)

J'ai actuellement ces données:

var dataset = [
{
 "bank": "Bank 1",
 "img": "Picture1.png"
},
{
 "bank": "Bank 2",
 "img": "Picture2.png"
},                  
{
 "bank": "Bank 3",
 "img": "Picture3.png"
}
];

Des données complexes dans le monde réel, n'est-ce pas? Sûr. OK, j'ai actuellement " bank " comme les valeurs de tick sur mon axe avec ce code D3.js:

var w = 1000;
var h = 700;
var padding = 30;
var wpadding = 120;
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h+padding);

var yScale = d3.scale.ordinal()
                .domain(dataset.map(function (d) { return d.bank; }))
                .rangeRoundBands([0, h], 0.55);

var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");

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

De toute façon, je suis sûr que vous pouvez voir où je vais avec ça. J'essaie maintenant de faire référence à la valeur img dans mon jeu de données, plutôt que seulement à la valeur de la banque .

Au début, j'ai pensé qu'il était possible d'utiliser axis.tickValues ​​([values]) avec une fonction anonyme pour référencer les valeurs img dans mes données JSON, mais cela ne fonctionne pas. Ou je le fais horriblement mal.

Alors j'ai pensé que c'était un cas d'utilisation:

 var imgs = svg.selectAll("img").data([dataset]);

mais alors mon souci avec cette méthode est que ceci ne sera pas correctement lié à l'axe, comme les bonnes valeurs de tic; C'est comme s'il s'agissait juste d'une collection d'images qui se trouvent à côté de mon axe, et en dimensionnant / positionnant les changements que je fais sur mon axe, je dois aussi appliquer séparément à ma collection d'images. Cela ne semble pas aussi élégant que d'avoir des images correctes en tant que valeurs de tick sur mon axe.

Est-ce que je fais quelque chose d'horriblement mal? Est-ce que quelqu'un a besoin de moi pour fournir plus d'informations?

Merci encore les filles et les gars!

MISE À JOUR : Merci à @larskotthoff, j'ai ajouté ceci:

svg.select(".axis").selectAll("text").remove();

var ticks = svg.select(".axis").selectAll(".tick")
                    .data(dataset)
                    .append("svg:image")
                    .attr("xlink:href", function (d) { return d.img ; })
                    .attr("width", 100)
                    .attr("height", 100);

Et ça (presque) marche! Eh bien, il montre des images, mais comme vous pouvez le deviner, le point d'origine de chaque image (c.-à-d. Leur angle supérieur gauche) est l'endroit où chaque coche se termine, ce qui donne l'image à l'intérieur du diagramme. La tique:

Impossible d'insérer des images sans suffisamment de repères StackOverflow, donc voici l'URL: i.stack.imgur.com/s2CX0.png L'image de la tique apparaît à l'intérieur du diagramme au lieu d'être cochée

Il est clair que je dois manipuler les x et les y des images, mais comment faire cela par rapport à la position de la tique individuelle? En d'autres termes, comment puis-je dire en D3: " Prendre le x, y de la coche et soustraire (une valeur codée de) 150 pour les deux, et faire que mon nouveau x, y pour mon image. "?

Merci encore pour votre aide!

MISE À JOUR # 2 : Après avoir finalement découvert this.parentNode et creusé dedans, je viens tout juste de découvrir que les attributs x, y définis sur les images liées à mon axe sont relatifs à chaque tick respectif! Je veux dire par là que je peux simplement ajouter:

                    .attr("x", -120)
                    .attr("y", -50);

comme attributs supplémentaires pour mes images, et les positionne à la gauche de leurs ticks respectifs (retour sur la position de l'étiquette de l'axe, pas assis sur le dessus du diagramme).

https://src-bin.com


Answer #1

Dataset:

var dataset = [
{
 "bank": "Bank 1",
 "img": "Picture1.png"
},
{
 "bank": "Bank 2",
 "img": "Picture2.png"
},                  
{
 "bank": "Bank 3",
 "img": "Picture3.png"
}
];

D3 code JS:

var w = 1000;
var h = 700;
var padding = 30;
var wpadding = 120;
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h+padding);


svg.select(".axis").selectAll("text").remove();

var ticks = svg.select(".axis").selectAll(".tick")
                    .data(dataset)
                    .append("svg:image")
                    .attr("xlink:href", function (d) { return d.img ; })
                    .attr("width", 100)
                    .attr("height", 100);
                    .attr("x", -120);
                    .attr("y", -50);


var yScale = d3.scale.ordinal()
                .domain(dataset.map(function (d) { return d.bank; }))
                .rangeRoundBands([0, h], 0.55);

var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");

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




d3.js