D3 fisheye sur la largeur sur le graphique à barres

Question

J'ai essayé de créer un graphique à barres vertical avec une distorsion cartésienne d3 fisheye avec seulement l'axe x étant déformé.

j'ai réussi à déformer la position x des barres verticales sur mouseover avec le code suivant:

var maxMag = d3.max(dataset, function(d) { return d.value[10]; }); 
var yScale = d3.scale.linear().domain([0, maxMag]).range([0, h]); 
var xScale = d3.fisheye.scale(d3.scale.linear).domain([0, dataset.length]).range([0, w]).focus(w/2); 

var bar = svg.append("g") 
     .attr("class", "bars") 
    .selectAll(".bar") 
     .data(dataset) 
    .enter().append("rect") 
     .attr("class", "bar") 
     .attr("y", function(d) { 
      return h - yScale(d.value[10]); 
     }) 
     .attr("width", w/dataset.length) 
     .attr("height", function(d) { 
      return yScale(d.value[10]); 
     }) 
     .attr("fill", function(d) { 
      return (d.value[10] <= 6? "yellow" : "orange"); 
     }) 
     .call(position); 

// Positions the bars based on data. 
function position(bar) { 
    bar.attr("x", function(d, i) { 
     return xScale(i); 
    }); 
} 

svg.on("mousemove", function() { 
    var mouse = d3.mouse(this); 
    xScale.distortion(2.5).focus(mouse[0]); 

    bar.call(position); 
}); 

Cependant, à ce stade, l'application de fisheye sur la largeur reste un mystère pour moi. J'ai essayé plusieurs méthodes comme l'utilisation d'une échelle fisheye pour la largeur mais cela ne fonctionne pas comme prévu. Ce que je souhaite faire est de faire en sorte que la largeur d'une barre augmente au passage de la souris, de la même manière qu'une seule barre verticale est sélectionnée au passage de la souris avec la distorsion cartésienne.

Des indices ou de l'aide seront les bienvenues!

edit: a modifié la méthode de calcul de la position de x à l'index en utilisant au lieu du temps pour éviter des écarts importants entre les barres dans le tableau

solution

: Merci à Superboggly, j'ai modifié la fonction de position comme suit:

// Positions the bars based on data. 
function position(bar) { 
    bar.attr("x", function(d, i) { 
     return xScale(i); 
    }); 
    bar.attr("width", function(d, i) { 
     return xScale(i+1) - xScale(i); 
    }) 
} 

Answer 1

Actuellement la largeur de votre barre est basée sur votre largeur divisé par la taille de votre ensemble de données correcte? Et si à la place vous calculiez votre largeur en fonction du temps, par ex. votre intervalle de temps complet divisé par la taille de l'ensemble de données? Puis chaque barre correspond à une période de temps et vous pouvez utiliser votre fonction "position" avec le début et la fin d'une barre pour calculer la largeur.