Question

我想更改d3.js呈现的图表的比例。

这是我提出的内容的摘录（关于Plunker的完整代码，见下文）：

var toggleZoom = function() {
  switch(state) {
  case 'zoomed_in':
    state = 'zoomed_out';
    scaleX = d3.scale.linear().rangeRound([0, width]).domain([min_out, max_out]);
    break;
  case 'zoomed_out':
    state = 'zoomed_in';
    scaleX = d3.scale.linear().rangeRound([0, width]).domain([min_in, max_in]);
    break;  
  }
  update(); // uses scaleX to render the graph
}

虽然这会以预期的方式初始化图形，但它会在后续函数调用时拒绝对图形进行任何更改。

我想这不是d3.js＆＃39;这样做的风格。什么是更有希望的方法？

我也研究过d3的变焦行为，但在这种情况下看起来并不合适，因为这实际上只是关于在一个轴上进行缩放之间的切换。

以下是使用以下内容的Plunker：http://plnkr.co/edit/3qoQoSerohiC9xFAuXyI

Answer 1

您实际上并未重绘图表。您只处理输入选择，后续调用将为空，因为rect元素已存在。要修复，也要处理更新选择：

var sel = svg.selectAll('rect').data(data);
sel
.enter().append('rect');
sel
.attr('x', function(d) { return scaleX(d.p) })
.attr('width', function(d) { return scaleX(d.p+d.l)-scaleX(d.p) } )
.attr('height', height)
.attr('fill', function(d) { return d.c });

完整演示here。

用d3.js改变比例

1 个答案: