d3.js масштабирование xScale/xAxis

Я пытаюсь создать простую диаграмму с возможностью масштабирования, и примеры, которые я нашел до сих пор, генерируют оси и деления вручную: http://bl.ocks.org/1182434

Однако я использовал встроенный объект оси, и я не знаю, как перевести масштаб, чтобы заставить его работать - есть идеи?

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);
}

person Victor Parmar    schedule 03.05.2012    source источник


Ответы (3)


Вот как я это сделал, если кому-то интересно:

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")     
        ;
}

Обратите внимание, что мне также пришлось установить предел масштаба:

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");
person Victor Parmar    schedule 04.05.2012

Вы можете проверить диаграмму, которую я сделал, которая включает функцию масштабирования, используя отдельный график, то же самое будет работать для увеличения существующего графика. Диаграмма доступна по адресу http://bl.ocks.org/1962173.

Вот как я масштабирую:

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();

Весь код доступен по ссылке, которую я указал выше.

person Bill    schedule 04.05.2012
comment
Спасибо! То, что у вас есть, довольно круто, но у вас также есть система отсчета внизу, я пытаюсь сделать это без этой системы отсчета :p - person Victor Parmar; 07.05.2012

вы можете добавить свой график с чувствительной областью событий (должно быть последним добавлением):

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

ПОСЛЕ (не включать) добавить управление событиями в этой области

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

добавить функцию рисования, например

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);
}

см. этот пример: https://groups.google.com/forum/?fromgroups=#!topic/d3-js/6p7Lbnz-jRQ%5B1-25-false%5D

person Alban    schedule 17.02.2013