d3.js放大xScale等/ X轴

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图创建一个简单的图表，使变焦能力，并且我发现迄今产生的轴和手动蜱的例子：http://bl.ocks.org/1182434d3.js放大xScale等/ X轴

我用什么然而，内置的轴对象，我不知道如何翻译的规模，让这个工作 - 任何想法？

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

回答：

嗯，这是我最后只是为了防止有人感兴趣：

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

回答：

您可以检查通过使用单独的图表，我做了一个包含缩放功能的图表，同样的事情可以放大现有的图表。图表可在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();

所有。

回答：

你可以用敏感事件区域追加你的图（必须是最后追加）：

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

以上是 d3.js放大xScale等/ X轴 的全部内容， 来源链接： utcz.com/qa/262919.html

回到顶部