d3.js zoom xScale / xAxis

Je suis en train de créer un graphique simple qui permet une capacité de zoom et les exemples que j'ai trouvé jusqu'à présent de générer les axes et les tiques manuellement: http://bl.ocks.org/1182434

Ce que j'ai utilisé, cependant, est intégré dans l'axe de l'objet et je ne sais pas comment traduire l'échelle pour arriver au travail - des idées?

var xScale = d3.scale.linear().
domain([0, 80]). //your data minimum and maximum
range([0, width]); //the pixels to map to, e.g., the width of the diagram.
var yScale = d3.scale.linear().
domain([100, 0]). 
range([0, height]); 
var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(10, d3.format(",d")),
yAxis = d3.svg.axis().orient("left").scale(yScale);
var chart = d3.select("#chart").append("svg")
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("pointer-events", "all")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(d3.behavior.zoom().on("zoom", redraw))
.append("g")
chart.append('svg:rect')
.attr('width', width)
.attr('height', height)
.attr('fill', 'white');
//x-axis
var xaxis = chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
//y-axis
var yaxis = chart.append("g")
.attr("class", "y axis")
.call(yAxis);
//omitted code to draw the path, it's just a path object that uses a line and passes data to it
function redraw() 
{
console.log("here", d3.event.translate, d3.event.scale);
path.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
//d3.event.transform(xScale, yScale);
//HERE is where I need to figure out how to scale the x and y axes!    
xAxis.scale(xScale);
yAxis.scale(yScale);
xaxis.call(xAxis);
yaxis.call(yAxis);
}

OriginalL'auteur Victor Parmar | 2012-05-03

  1. 4

    Bien c'est comment j'ai fini par le faire dans le cas où personne n'était intéressé:

    function redraw() 
{
console.log("here", d3.event.translate, d3.event.scale);
path.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");     
var xoffset = (xMax + xMin) / 2;
var yoffset = (yMax + yMin) / 2;
var xTemp = [(0 - xoffset) * (1/d3.event.scale), (0 + xoffset) * (1/d3.event.scale)];
var yTemp = [(0 - yoffset) * (1/d3.event.scale), (0 + yoffset) * (1/d3.event.scale)];
xMin = xTemp[0] + xoffset;
xMax = xTemp[1] + xoffset;
yMin = yTemp[0] + yoffset;
yMax = yTemp[1] + yoffset;
console.log("", xMin, xMax, yMin, yMax);
xScale.domain([xMin, xMax]);
yScale.domain([yMax, yMin]);
xaxis.call(xAxis);
yaxis.call(yAxis);
path.attr("d", line)
.attr("transform", null)
.transition()       
.ease("linear")     
;
}

    Noter que j'ai également eu à régler l'échelle de la limite:

    var chart = d3.select("#chart").append("svg")
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("pointer-events", "all")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(d3.behavior.zoom().scaleExtent([0.2, 5]).on("zoom", redraw))
.append("g");

    OriginalL'auteur Victor Parmar

  2. 4

    Vous pouvez consulter un tableau que j'ai fait qui inclut des fonctionnalités de zoom à l'aide d'un graphique séparé, la même chose serait de travailler pour zoomer sur le graphique. La charte est disponible à http://bl.ocks.org/1962173.

    Voici la façon dont je le zoom:

    var rects, labels
, minExtent = d3.time.day(brush.extent()[0])
, maxExtent = d3.time.day(brush.extent()[1])
, visItems = items.filter(function (d) { return d.start < maxExtent && d.end > minExtent});
mini.select('.brush').call(brush.extent([minExtent, maxExtent]));       
//modify the domain (this is what actually does the 'zoom')
x1.domain([minExtent, maxExtent]);
//then redraw the updated axis which are based on the modified domain
main.select('.main.axis.date').call(x1DateAxis);
main.select('.main.axis.month').call(x1MonthAxis)
.selectAll('text')
.attr('dx', 5)
.attr('dy', 12);
//upate the item rects that are visible
rects = itemRects.selectAll('rect')
.data(visItems, function (d) { return d.id; })
.attr('x', function(d) { return x1(d.start); })
.attr('width', function(d) { return x1(d.end) - x1(d.start); });
//append any new data that is now in view
rects.enter().append('rect')
.attr('x', function(d) { return x1(d.start); })
.attr('y', function(d) { return y1(d.lane) + .1 * y1(1) + 0.5; })
.attr('width', function(d) { return x1(d.end) - x1(d.start); })
.attr('height', function(d) { return .8 * y1(1); })
.attr('class', function(d) { return 'mainItem ' + d.class; });
//remove any data that is no longer in view
rects.exit().remove();

    Tout le code est disponible sur le lien que j'ai fourni ci-dessus.

    Merci! Ce que vous avez est assez cool, mais vous avez également un cadre de référence sur le fond, je suis en train de le faire sans que le cadre de référence :p

    OriginalL'auteur Bill

  3. 1

    vous pouvez Ajouter votre graphique avec la sensibilité d'événements (doit être le dernier ajout) :

    var rect = svg.append("svg:rect")
.attr("class", "pane")
.attr("width", w)
.attr("height", h);

    APRÈS (ne pas inclure) ajouter la gestion de l'événement sur cette zone

    rect.call(d3.behavior.zoom().x(x).scaleExtent([0.5, 4]).on("zoom", draw));

    ajouter une fonction de dessin comme

    function draw() {
svg.select("g.x.axis").call(xAxis);
svg.select("g.y.axis").call(yAxis);
svg.select("path.area").attr("d", area);
svg.select("path.line").attr("d", line);
}

    voir cet exemple : https://groups.google.com/forum/?fromgroups=#!topic/d3-js/6p7Lbnz-jRQ%5B1-25-faux%5D

    OriginalL'auteur Alban